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-gallery

Import 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.