Description
----> compatible with Angular 8+ <----
Responsive image gallery designed for high resolution images.
The project consists of a gallery, a viewer and a script for image preparation.
Before using the gallery, you have to process all of your images that will be part of your gallery with the convert script. The processed images will be stored to your applications assets or, if you wish, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care an optimal image quality is served based on the screen resolution.
Angular 2 Image Gallery alternatives and similar packages
Based on the "Images" category.
Alternatively, view Angular 2 Image Gallery alternatives based on common mentions on social networks and blogs.
-
-
gocv
Go package for computer vision using OpenCV 4 and beyond. Includes support for DNN, CUDA, and OpenCV Contrib. -
pigo
Fast face detection, pupil/eyes localization and facial landmark points detection library in pure Go. -
-
-
-
darkroom
An image proxy with changeable storage backends and image processing engines with focus on speed and resiliency. -
-
fastimage
Finds the type and/or size of a remote image given its uri, by fetching as little as needed. -
LookUp
:mag: Pure Go implementation of fast image search and simple OCR, focused on reading info from screenshots -
webp-server
Simple and minimal image server capable of storing, resizing, converting and caching images.
InfluxDB - Power Real-Time Data Analytics at Scale
Do you think we are missing an alternative of Angular 2 Image Gallery or a related project?
README
Angular 2 Image Gallery
----> compatible with Angular 8+ <----
Responsive image gallery designed for high resolution images.
The project consists of a gallery, a viewer and a script for image preparation.
Before using the gallery, you have to process all of your images that will be part of your gallery with the convert script. The processed images will be stored to your applications assets or, if you wish, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care an optimal image quality is served based on the screen resolution.
Demo
https://oidamo.de/gallery-demo.html
How to use the gallery in your project
Pre-requirements
Install graphicsmagick: http://www.graphicsmagick.org/README.html#installation
Embed in your project
1. Install angular2-image-gallery
npm install angular2-image-gallery --save
npm install hammerjs --save
2. Import angular2-image-gallery in your Angular module
imports: [
Angular2ImageGalleryModule
],
3. Add hammer.js for support of mobile devices
Add the following line to your main.ts file:
import 'hammerjs';
4. Run convert script
node node_modules/angular2-image-gallery/convert.js <path/to/your/images>
Add a flag to define the order of the images inside the gallery
-n sort by file name (default)
-d sort chronologically by the original creation time (e.g. for coverages of a wedding)
-c sort by primary image color
Additional optional parameter to support multiple galleries. Add it if you want to put your images into a separate gallery.
--gName=yourGalleryName
5. Embed gallery in your template
<gallery
[flexBorderSize]="3"
[flexImageSize]="7"
[galleryName]="'yourGalleryName'"
[maxRowsPerPage]="100"
(viewerChange)="yourNotificationFunction($event)">
</gallery>
All parameters are optional. You may play around on the demo site to find out what parameters suit your needs.
The viewerChange event notifies you when the viewer component gets opened or closed.
That's it, start your application and have a look!
Fetching images from an external data source
If you'd like to know how you could fetch your images from an external data source CLICK HERE
I don't want to use the convert script and provide my own metadata JSON
This is possible, but not the intent of this project. Please CLICK HERE
Currently used tools
- Angular 7.0.0
- NodeJS 8.11.2
- graphicsmagick
Troubleshooting
If the conversion process fails, make sure you have enough swap space provided.
If you experience any other issues, please raise an issue on GitHub.