ngx-cdk-lightbox v17.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(GalleryDisplayObjectType[], GalleryConfigInterface);

type GalleryDisplayObjectType = GalleryImageInterface | GalleryVideoInterface;

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

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

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

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

GalleryVideoInterface

GalleryConfigInterface

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