This project is no longer maintained. Please consider other image galleries.

ngx-image-gallery

Prerequisites

npm i -S hammerjs lodash

import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
 enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
 platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.log(err));
});

Install

npm install --save @web-aid-kit/ngx-image-gallery

Import

import { NgxImageGalleryModule } from '@web-aid-kit/ngx-image-gallery';
@NgModule({
 ...,
 imports: [
 NgxImageGalleryModule,
 ...
 ]
})
export class AppModule { }

Use

// app.component.html
<ngx-image-gallery 
[images]="images" 
[conf]="conf"
(onOpen)="galleryOpened($event)"
(onClose)="galleryClosed()"
(onImageClicked)="galleryImageClicked($event)"
(onImageChange)="galleryImageChanged($event)"
(onDelete)="deleteImage($event)"
></ngx-image-gallery>

Configure

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from '@web-aid-kit/ngx-image-gallery';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
 // get reference to gallery component
 @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent;
 
 // gallery configuration
 conf: GALLERY_CONF = {
 imageOffset: '0px',
 showDeleteControl: false,
 showImageTitle: false,
 };
	
 // gallery images
 images: GALLERY_IMAGE[] = [
 {
 url: "https://images.pexels.com/photos/669013/pexels-photo-669013.jpeg?w=1260", 
 altText: 'woman-in-black-blazer-holding-blue-cup', 
 title: 'woman-in-black-blazer-holding-blue-cup',
 thumbnailUrl: "https://images.pexels.com/photos/669013/pexels-photo-669013.jpeg?w=60"
 },
 {
 url: "https://images.pexels.com/photos/669006/pexels-photo-669006.jpeg?w=1260", 
 altText: 'two-woman-standing-on-the-ground-and-staring-at-the-mountain', 
 extUrl: 'https://www.pexels.com/photo/two-woman-standing-on-the-ground-and-staring-at-the-mountain-669006/',
 thumbnailUrl: "https://images.pexels.com/photos/669006/pexels-photo-669006.jpeg?w=60"
 },
 ];
 constructor(){}
 ngOnInit() {}
	
 // METHODS
 // open gallery
 openGallery(index: number = 0) {
 this.ngxImageGallery.open(index);
 }
	
 // close gallery
 closeGallery() {
 this.ngxImageGallery.close();
 }
	
 // set new active(visible) image in gallery
 newImage(index: number = 0) {
 this.ngxImageGallery.setActiveImage(index);
 }
	
 // next image in gallery
 nextImage(index: number = 0) {
 this.ngxImageGallery.next();
 }
	
 // prev image in gallery
 prevImage(index: number = 0) {
 this.ngxImageGallery.prev();
 }
	
 /**************************************************/
	
 // EVENTS
 // callback on gallery opened
 galleryOpened(index) {
 console.info('Gallery opened at index ', index);
 }
 // callback on gallery closed
 galleryClosed() {
 console.info('Gallery closed.');
 }
 // callback on gallery image clicked
 galleryImageClicked(index) {
 console.info('Gallery image clicked with index ', index);
 }
 
 // callback on gallery image changed
 galleryImageChanged(index) {
 console.info('Gallery image changed to index ', index);
 }
 // callback on user clicked delete button
 deleteImage(index) {
 console.info('Delete image at index ', index);
 }
}

Interfaces

// gallery configuration
export interface GALLERY_CONF {
 imageBorderRadius?: string; // css border radius of image (default 3px)
 imageOffset?: string; // add gap between image and it's container (default 20px)
 imagePointer? :boolean; // show a pointer on image, should be true when handling onImageClick event (default false)
 showDeleteControl?: boolean; // show image delete icon (default false)
 showCloseControl?: boolean; // show gallery close icon (default true)
 showExtUrlControl?: boolean; // show image external url icon (default true)
 showImageTitle?: boolean; // show image title text (default true)
 showThumbnails?: boolean; // show thumbnails (default true)
 closeOnEsc?: boolean; // close gallery on `Esc` button press (default true)
 reactToKeyboard?: boolean; // change image on keyboard arrow press (default true)
 reactToMouseWheel?: boolean; // change image on mouse wheel scroll (default true)
 reactToRightClick?: boolean; // disable right click on gallery (default false)
 thumbnailSize?: number; // thumbnail size (default 30)
 backdropColor?: string; // gallery backdrop (background) color (default rgba(13,13,14,0.85))
 inline?: boolean; // make gallery inline (default false)
 showArrows?: boolean; // show prev / next arrows (default true)
}
// gallery image
export interface GALLERY_IMAGE {
 url: string; // url of the image
 thumbnailUrl?: string; // thumbnail url (recommended), if not present, gallery will use `url` property to get thumbnail image.
 altText?: string; // alt text for image
 title?: string; // title of the image
 extUrl?: string; // external url of image
 extUrlTarget?: string; // external url target e.g. '_blank', '_self' etc.
}

Make gallery inline

Dynamic Update

// change images
this.images = this.images.concat([...]);
// change conf
this.conf = {...};