Elegant Image Gallery For Angular 4+ – ngx-image-gallery

Description:

ngx-image-gallery is a modal and inline image gallery library for Angular 4+ app.

Installation:

npm install --save ngx-image-gallery

Usage:

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

Interface:

export interface GALLERY_CONF {
	imageBorderRadius?: string;
	imageOffset?: string;
	showDeleteControl?: boolean;
	showCloseControl?: boolean;
	showExtUrlControl?: boolean;
	showArrows?: boolean;
	showImageTitle?: boolean;
	showThumbnails?: boolean;
	closeOnEsc?: boolean;
	reactToKeyboard?: boolean;
	reactToMouseWheel?: boolean;
	reactToRightClick?: boolean;
	thumbnailSize?: number;
	backdropColor?: string;
	inline?: boolean;
}

export interface GALLERY_IMAGE {
	_cached?: boolean;
	url: string;
	thumbnailUrl?: string;
	altText?: string;
	title?: string;
	extUrl?: string;
	extUrlTarget?: string;
}

Configs.

const DEFAULT_CONF: GALLERY_CONF = {
  imageBorderRadius: '3px',
  imageOffset: '20px',
  showDeleteControl: false,
  showCloseControl: true,
  showExtUrlControl: true,
  showImageTitle: true,
  showThumbnails: true,
  closeOnEsc: true,
  reactToKeyboard: true,
  reactToMouseWheel: true,
  reactToRightClick: false,
  thumbnailSize: 30,
  backdropColor: 'rgba(13,13,14,0.85)',
  inline: false,
  showArrows: true
};

Preview: