Lightbox for Angular

A simple, responsive lightbox component.

Demo

http://ivylab.space/lightbox

Installation

Install npm package for Angular version 8+:

npm i @crystalui/angular-lightbox --save

For Angular 7 and earlier:

npm i @crystalui/angular-lightbox@1.0.6 --save

Import module:

1import {CrystalLightboxModule} from '@crystalui/angular-lightbox';
2
3@NgModule({
4    imports: [CrystalLightboxModule]
5})

Usage

You can cluster images into group.

1<div lightbox-group>
2    <img src="path_to_image" lightbox [fullImage]="{path: 'path_to_fullimage'}" />
3</div>

Or keep them as separate images.

1<img src="path_to_image" lightbox [fullImage]="{path: 'path_to_fullimage'}" />

You don’t need to specify the path to the large image, it’ll work either way.

1<img src="path_to_image" lightbox />

Properties

1imageMaxHeight: string = "100%"
2// Maximum image height.
3
4imageMaxWidth: string = "100%"
5// Maximum image width.
6
7counter: boolean = false
8// Image counter.
9
10counterSeparator: string = "/"
11// The text separator counter.
12
13backgroundColor: "black" | "white" = "black"
14// Background color. Inverts the black and white colors of the controls and the background.
15
16backgroundOpacity: number = "0.85"
17// Lightbox background opacity.
18
19animationDuration: number = "400"
20// Speed of opening and closing animation.
21
22animationTimingFunction: string = "cubic-bezier(0.475, 0.105, 0.445, 0.945)"
23// Smooth opening and closing animation function.
24
25closeButtonText: string = "Close"
26// The Close button text.
27
28hideThumbnail: boolean = true
29// Hide the thumbnail when opening the lightbox.
30
31disable: boolean = false
32// Disable the lightbox.

Events

1thumbnail:click
2{type: "thumbnail:click"}
3// Click on the thumbnail.
4
5show-state:initial
6{type: "show-state:initial"}
7// Preparing styles for starting the lightbox display animation and the preloader display.
8
9show-state:animation
10{type: "show-state:animation"}
11// Starting the lightbox display animation.
12
13show-state:animation-end
14{type: "show-state:animation-end"}
15// Ending the lightbox display animation.
16
17closing-state:initial
18{type: "closing-state:initial"}
19// Preparing styles for starting the lightbox closing animation.
20
21closing-state:animation
22{type: "closing-state:animation"}
23// Starting the lightbox closing animation.
24
25closing-state:animation-end
26{type: "closing-state:animation-end"}
27// Ending the lightbox closing animation.

Browser support

NAME	VERSION
Chrome / Chrome for Android	50+ / Android 4.4+
FireFox	48+
Opera	44+
Safari / iOS Safari	10.1, 11.1 / iOS 9+
Internet Explorer	Edge 15+