Skip to content

Gallerize Examples

Jump to bottom
Murhaf Sousli edited this page Mar 28, 2020 · 4 revisions

Basic usage

Wrap elements inside a gallerize directive

<div class="container" gallerize>
   <img src="https://preview.ibb.co/jrsA6R/img12.jpg">
   <img src="https://preview.ibb.co/kPE1D6/clouds.jpg">
   <img src="https://preview.ibb.co/mwsA6R/img7.jpg">
   <img src="https://preview.ibb.co/kZGsLm/img8.jpg">
</div>

You can also use normal element background instead of img

<div class="container" gallerize>
   <div [style.background]="'url(' + 'https://preview.ibb.co/jrsA6R/img12.jpg' + ')'"></div>
   <div [style.background]="'url(' + 'https://preview.ibb.co/kPE1D6/clouds.jpg' + ')'"></div>
   <div [style.background]="'url(' + 'https://preview.ibb.co/mwsA6R/img7.jpg' + ')'"></div>
   <div [style.background]="'url(' + 'https://preview.ibb.co/kZGsLm/img8.jpg' + ')'"></div>
</div>

Define image's full and thumbnail sources

Use the attributes imageSrc and thumbSrc to set image full size and thumbnail size

<div class="container"
     gallerize>
  <img *ngFor="let image of images"
       [src]="image.thumb"
       [attr.imageSrc]="image.src"
       [attr.thumbSrc]="image.thumb">
</div>

Gallerize specific elements

Use the input [selector] to gallerize specific elements

<div class="container" 
     gallerize
     selector=".gallery-img">
  <div *ngFor="let image of images"
       class="gallery-img"
       [style.backgroundImage]="'url(' + image.thumb + ')'"
       [attr.imageSrc]="image.src"
       [attr.thumbSrc]="image.thumb"></div>
</div>

Multiple galleries

To use multiple galleries, just set a unique id, e.g. gallerize="gallery-123"

<h3>Gallery 1</h3>

<div class="container"
     gallerize="gallery-1">
<img *ngFor="let image of data"
      [src]="image.previewUrl"
      [attr.imageSrc]="image.srcUrl"
      [attr.thumbSrc]="image.previewUrl">
</div>

<h3>Gallery 2</h3>

<div class="container"
     gallerize="gallery-2">
<img *ngFor="let image of data2"
      [src]="image.previewUrl"
      [attr.imageSrc]="image.srcUrl"
      [attr.thumbSrc]="image.previewUrl">
</div>

Here is a multiple gallerize stackblitz.

Gallerize on <gallery> component

Gallerize can also be used on <gallery> component, This will trigger the lightbox on a gallery item's click.

<gallery gallerize [items]="items"></gallery>

Here is a Gallerize on gallery stackblitz

Set custom config when using gallerize 

GalleryModule.withConfig({
  thumbPosition: 'bottom'
}),

Here is a demo https://stackblitz.com/edit/ngx-gallery-multiple-gallerize

constructor(gallery: Gallery) {
  gallery.ref('gallery-1').setConfig({
    thumbPosition: 'bottom'
  })
}

For the latest features (v12): Check out our storybook documentation

Clone this wiki locally