ngx-cdk-lightbox

ngx-cdk-lightbox

Custom implementation of CDK to display image gallery in lightbox.

Installation

1. Install npm package

npm

npm install ngx-cdk-lightbox --save

yarn

yarn add ngx-cdk-lightbox

2. Import library to your module

import { LightboxModule, LightboxService } from 'ngx-cdk-lightbox';

3. Add imports & provider to your module

@NgModule({
	imports: [
		...
		LightboxModule,
	],
	providers: [
		...
		LightboxService,
	],
})
export class SomeModule { }

Usage

this.lightboxService.open(GalleryDisplayObjectType[], GalleryConfigInterface);

type GalleryDisplayObjectType = GalleryImageInterface|GalleryVideoInterface;

interface GalleryImageInterface
{
	source: string;
	description?: string;
	copyright?: string;
}

type videoResolutionsType = 240|360|480|720|1080|2160|4320;

export interface GalleryVideoInterface
{
	mp4Source: string|Partial<Record<videoResolutionsType, string>>;
	description?: string;
	copyright?: string;
}

interface GalleryConfigInterface
{
	enableZoom?: boolean;
	zoomSize?: number|'originalSize';
	enableImageClick?: boolean;
	loopGallery?: boolean;
	enableImageCounter?: boolean;
	imageCounterText?: string;
	enableCloseIcon?: boolean;
	closeIcon?: string;
	enableArrows?: boolean;
	arrowRight?: string;
	arrowLeft?: string;
	enableImagePreloading?: boolean;
	startingIndex?: number;
	enableAnimations?: boolean;
}

GalleryImageInterface

key	value
source	path to image
description	optional - description of image
copyright	optional - copyright info

GalleryVideoInterface

key	value
mp4Source	path to video source/sources
description	optional - description of video
copyright	optional - copyright info

GalleryConfigInterface

key	type	default	value
enableZoom	boolean	false	display zoom on mouse hover over image
zoomSize	number, 'originalSize'	'originalSize'	zoom size, number for zoom multiplication, originalSize for original image size
enableImageClick	boolean	true	enable click on image to navigate to next or previous photo
loopGallery	boolean	true	loop gallery after last photo or before first photo
enableImageCounter	boolean	true	display current image counter
imageCounterText	string	'IMAGE_INDEX photo of IMAGE_COUNT'	format for image counter
enableCloseIcon	boolean	true	display close icon
closeIcon	string	https://material.io/tools/icons/?icon=close&style=baseline	HTML string containing close icon
enableArrows	boolean	true	display next/prev icons
arrowRight	string	https://material.io/tools/icons/?icon=keyboard_arrow_right&style=baseline	HTML string containing right arrow
arrowLeft	string	https://material.io/tools/icons/?icon=keyboard_arrow_left&style=baseline	HTML string containing left arrow
enableImagePreloading	boolean	enable/disable image preloading
startingIndex	number	0	index of starting image
enableAnimations	boolean	true	enable/disable animations

Usage example

@Component({
	...
})
export class SomeComponent
{
	constructor(private lightboxService: LightboxService)
	{
	}

	public openLightbox():void
	{
		this.lightboxService.open([
			{source: 'assets/images/image1.jpg', copyright: 'unknown'},
			{source: 'assets/images/image5.jpg', copyright: 'unknown'},
		], {
			enableAnimations: false,
		});

		return;
	}
}

ToDo

• Demo

Donate

You are currently using code that is totally for free and that is fine. But if you want to put a soup on a developer's table anyway, feel free to do so :).