Responsive gallery with support for masonry layout and lightbox.
npm install ngx-crystal-galleryResponsive gallery with support for masonry layout and lightbox.
Install the npm package:
``sh`
npm i ngx-crystal-gallery
Import module:
`ts
import {CrystalGalleryModule} from 'ngx-crystal-gallery/components';
@NgModule({
imports: [CrystalGalleryModule]
})
`
ts
myImages = [
{
preview: 'path_to_preview',
full: 'path_to_full_image',
width: natural_width, // used for masonry
height: natural_height, // used for masonry
description: 'description of the image' // optional property
},
...
];myConfig = {
...
};
`
html
`You can also use a lightbox separately.
ts
import { CrystalLightbox } from 'ngx-crystal-gallery';constructor(lightbox: CrystalLightbox) {}
myImages = [
{
path: 'path_to_image'
},
...
];
`
html
``| name | type | default | description |
|------------------|----------------|--------------------|----------------------------------------|
| masonry | boolean | true | Masonry layout mode. |
| masonryMaxHeight | number | 200 | Maximum height of the image in the grid. |
| masonryGutter | number | 4 | Adds space between images (it is recommended to use even numbers). |
| 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. |
| name | description |
|----------------------|------------------------------------------|
| open(images, config) | Open full image in lightbox. |