ngx-image-gallery
Probably the best Angular 4+ modal and inline image gallery. Angular upgrade for ng-image-gallery.
Install
npm install --save ngx-image-gallery
Import
import { NgxImageGalleryModule } from '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 "ngx-image-gallery";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
@ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent;
conf: GALLERY_CONF = {
imageOffset: '0px',
showDeleteControl: false,
showImageTitle: false,
};
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() {}
openGallery(index: number = 0) {
this.ngxImageGallery.open(index);
}
closeGallery() {
this.ngxImageGallery.close();
}
newImage(index: number = 0) {
this.ngxImageGallery.setActiveImage(index);
}
nextImage(index: number = 0) {
this.ngxImageGallery.next(index);
}
prevImage(index: number = 0) {
this.ngxImageGallery.prev(index);
}
galleryOpened(index) {
console.info('Gallery opened at index ', index);
}
galleryClosed() {
console.info('Gallery closed.');
}
galleryImageClicked(index) {
console.info('Gallery image clicked with index ', index);
}
galleryImageChanged(index) {
console.info('Gallery image changed to index ', index);
}
deleteImage(index) {
console.info('Delete image at index ', index);
}
}
Interfaces
export interface GALLERY_CONF {
imageBorderRadius?: string;
imageOffset?: string;
imagePointer? :boolean;
showDeleteControl?: boolean;
showCloseControl?: boolean;
showExtUrlControl?: boolean;
showImageTitle?: boolean;
showThumbnails?: boolean;
closeOnEsc?: boolean;
reactToKeyboard?: boolean;
reactToMouseWheel?: boolean;
reactToRightClick?: boolean;
thumbnailSize?: number;
backdropColor?: string;
inline?: boolean;
showArrows?: boolean;
}
export interface GALLERY_IMAGE {
url: string;
thumbnailUrl?: string;
altText?: string;
title?: string;
extUrl?: string;
extUrlTarget?: string;
}
All properties ending with ?
are optional.
Make gallery inline
You can make gallery inline like a carousel by setting conf.inline
to true
but make sure to change conf.backdropColor
as well if you need white backdrop color. Also width
and height
of the gallery can be adjusted by manually applying css styles with !important
flag on gallery element.
Dynamic Update
You can update gallery images images
and gallery configuration conf
anytime you want even when gallery is opened but due to Angular's change detection restrictions you must assign these variable to new value instead of changing internal properties as mentioned below.
this.images = this.images.contact([...]);
this.conf = {...};
Copyrights
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". We would appreciate if you contact us at thatisuday@gmail.com
(if you are a business, institution or organization) so that we can mention your name in users list on this page.