ngx-cdk-lightbox v19.0.0

ngx-cdk-lightbox

Custom implementation of CDK to display image gallery in lightbox.

Demo

https://www.davidmyska.com/ngx-cdk-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 { NgxCdkLightboxModule } from 'ngx-cdk-lightbox';

3. Import NgxCdkLightboxModule into your module

@NgModule({
	imports: [...NgxCdkLightboxModule],
})
export class SomeModule {}

Usage

this.lightboxService.open(TGalleryDisplayObject[], IGalleryConfig);

type TGalleryDisplayObject = IGalleryImage | IGalleryVideo;

interface IGalleryImage {
	type: 'image';
	source: string;
	description?: string;
	copyright?: string;
}

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

export interface IGalleryVideo {
	type: 'video';
	mp4Source: string | Partial<Record<TVideoResolutions, string>>;
	description?: string;
	copyright?: string;
	resolution?: {
		width: number;
		height: number;
	};
}

interface IGalleryConfig {
	enableZoom?: boolean;
	zoomSize?: number | 'originalSize';
	enableImageClick?: boolean;
	loopGallery?: boolean;
	enableImageCounter?: boolean;
	imageCounterText?: string;
	enableCloseIcon?: boolean;
	closeIcon?: string;
	enableArrows?: boolean;
	arrowRight?: string;
	arrowLeft?: string;
	loaderTemplate?: TemplateRef<unknown>;
	enableImagePreloading?: boolean;
	startingIndex?: number;
	enableAnimations?: boolean;
}

IGalleryImage

IGalleryVideo

IGalleryConfig

Usage example

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

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

ToDo

• Support for iframe

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 :).