for Angular

Basic usage

Use the lightbox to view one image or a group of images, with the scroll option. See feature showcase.

Usage

You can cluster images into group.

Or keep them as separate images.

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

Related component: Gesture-enabled Lightbox

Swipe the images and use pinch zoom or double tap to zoom them in and out.

Installation

Install the npm package:

npm i @crystalui/angular-lightbox

Import module:

Properties

imageMaxHeightstring = "100%"
Maximum image height.
imageMaxWidthstring = "100%"
Maximum image width.
counterboolean = false
Image counter.
counterSeparatorstring = "/"
The text separator counter.
backgroundColor"black" | "white" = "black"
Background color. Inverts the black and white colors of the controls and the background.
backgroundOpacitynumber = "0.85"
Lightbox background opacity.
animationDurationnumber = "400"
Speed of opening and closing animation.
animationTimingFunctionstring = "cubic-bezier(0.475, 0.105, 0.445, 0.945)"
Smooth opening and closing animation function.
closeButtonTextstring = "Close"
The Close button text.
hideThumbnailboolean = true
Hide the thumbnail when opening the lightbox.
disableboolean = false
Disable the lightbox.

Events

thumbnail:click
Click on the thumbnail.
show-state:initial
Preparing styles for starting the lightbox display animation and the preloader display.
show-state:animation
Starting the lightbox display animation.
show-state:animation-end
Ending the lightbox display animation.
closing-state:initial
Preparing styles for starting the lightbox closing animation.
closing-state:animation
Starting the lightbox closing animation.
closing-state:animation-end
Ending the lightbox closing animation.

Browser support

Chrome / Chrome for Android 50+ / Android 4.4+
FireFox
Opera
Safari / iOS Safari 10.1, 11.1 / iOS 9+
Internet Explorer