angular-gallery

Responsive gallery for Angular with touch screen support.

Usage no npm install needed!

<script type="module">
  import angularGallery from 'https://cdn.skypack.dev/angular-gallery';
</script>

README

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.