drozhzhin-n-e / ngx-crystal-gallery

http://crystalui.org/components/gallery
MIT License
10 stars 8 forks source link
angular angular2 gallery ng2 ngx

Gallery for Angular 2

Responsive gallery with support for masonry layout and lightbox.

Installation

Install the npm package:

npm i ngx-crystal-gallery --save

Import module:

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

@NgModule({
  imports: [ CrystalGalleryModule ]
});

Usage

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

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 = {
  ...
};

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

You can also use a lightbox separately.

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

constructor(lightbox: CrystalLightbox) {}

myImages = [
  {
    path: 'path_to_image'
  },
  ...
];

<button (click)="lightbox.open(myImages)">Show the photo of road</button>
<button (click)="lightbox.open(myImages, {index: 1})">Show the photo of forest</button>
<button (click)="lightbox.open([{path: 'path_to_image'}])">Show the photo of hill</button>

Properties

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.

Methods

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

Demo

http://crystalui.org/components/gallery

Sponsors

We use Browserstack for cross-browser testing.

Browserstack