Gallery for Angular

Responsive gallery with support for masonry layout and lightbox.

This project has been archived
View on GitHub


1. Install the npm package.

npm i ngx-crystal-gallery

2. Import module:

import {CrystalGalleryModule} from 'ngx-crystal-gallery';

    imports: [CrystalGalleryModule]


By default, the gallery is displayed as masonry grid layout allowing you to open an enlarged image in the lightbox.

Basic usage
<crystal-gallery [images]="myImages" [config]="myConfig"></crystal-gallery>

You can also use a lightbox separately.

Lightbox usage
<button (click)="">Photo of road</button>
<button (click)=", {index: 1})">Photo of forest</button>
<button (click)="[{path: 'path_to_image'}])">Photo of hill</button>


masonry: boolean = true
Masonry layout mode.
masonryMaxHeight: number = 200
Maximum height of the image in the grid.
masonryGutter: number = 3
Adds space between images.
loop: boolean = false
If false, will disable the ability to loop back to the beginning of the group when on the last element.
backgroundOpacity: number = 0.85
Opacity level of lightbox background. Range: 0 to 1.
counter: boolean = false
Image count in lightbox.
animationDuration: number = 100
Duration of animation to open and close the lightbox.
lightboxMaxHeight: string = "100%"
Maximum lightbox image height. You can specify a complex value, for example: 100% + 100px * 2.
lightboxMaxWidth: string = "100%"
Maximum lightbox image width. You can set a complex value, similar to lightboxMaxHeight.


open(images, config)
Open full image in lightbox.