1.0.2 • Published 4 years ago
angular-gallery v1.0.2
Gallery for Angular
Responsive gallery for Angular with touch screen support.
Live demo can be found on home page.
Installation
Install the npm package.
npm i angular-galleryImport module:
import {IvyGalleryModule} from 'angular-gallery';
@NgModule({
imports: [IvyGalleryModule]
})Usage
Build your list of thumbnails and open them in full size using the gallery, passing the index of the image as an argument.
import {Gallery} from 'angular-gallery';
constructor(private gallery: Gallery) {}
showGallery(index: number) {
let prop = {
images: [
{path: 'path_to_image_full_image'},
...
],
index
};
this.gallery.load(prop);
}<img src="path_to_thumbnail" (click)="showGallery(index)">Properties
| name | type | default | description |
|---|---|---|---|
| index | number | The index of the image in the array that will be displayed when the gallery is opened. | |
| minSwipeDistance | number | 50 | Minimum distance for swipe. |
| transitionDuration | number | 400 | Animation duration. |
| transitionTimingFunction | 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear' | 'ease' | Smooth animation function. |
| counter | boolean | false | Show counter. |
| counterSeparator | string | ' / ' | Counter separator. |
| arrows | boolean | true | Arrows for image navigation. |
Browser support
IvyGallery supports the most recent two versions of all major browsers: Chrome (including Android 4.4-10), Firefox, Safari (including iOS 9-13), and Edge.