Lightboxes

You can use Justified Gallery with any lightbox, in the way you prefer. In this tutorial we use GLightbox, a modern lightbox with no dependencies, but the same principles can be applied to any other lightbox (for example PhotoSwipe, which additionally requires the image dimensions in data-pswp-* attributes on every link).

GLightbox

GLightbox works directly with the standard Justified Gallery markup: a series of links to the original images, each containing a thumbnail. Install it, initialize the gallery, and attach the lightbox to the entry links:

npm install glightbox

import { JustifiedGallery } from 'justified-gallery';
import 'justified-gallery/style.css';
import GLightbox from 'glightbox';
import 'glightbox/dist/css/glightbox.min.css';

new JustifiedGallery(document.querySelector('#lightboxExample'), {
  lastRow: 'nojustify',
  rowHeight: 100,
  margins: 1,
}).init();

GLightbox({ selector: '#lightboxExample a' });

Try it out — click any image:

Grouping with rel and target

Some lightboxes group images into a gallery through the rel attribute of the links. Justified Gallery can rewrite that attribute for you on every entry with the rel option, and similarly the target attribute with the target option:

new JustifiedGallery(document.querySelector('#mygallery'), {
  rel: 'gallery1',
}).init();

Multiple galleries in one page

Each gallery needs its own JustifiedGallery instance, and its own lightbox group. Just loop over the containers:

<div class="myExMul">
  <a href="image1.jpg"><img alt="title 1" src="image1_thumbnail.jpg" /></a>
  ...
</div>
<div class="myExMul">
  <a href="image3.jpg"><img alt="title 3" src="image3_thumbnail.jpg" /></a>
  ...
</div>

document.querySelectorAll('.myExMul').forEach((el, i) => {
  el.id = 'myExMul-' + i;
  new JustifiedGallery(el, { rel: 'myExMul-' + i }).init();
  GLightbox({ selector: '#myExMul-' + i + ' a' });
});

Each of the following three galleries opens its own lightbox group:

Gallery 1

Gallery 2

Gallery 3