Error Handling

Justified Gallery handles loading errors gracefully: it never shows error messages to your visitors, and it recovers whatever is possible.

The rules are simple:

• The library tries to load the given thumbnail. In case of an error it skips that entry (which stays hidden), and continues to build the layout with the other thumbnails.
• If the library needs a different thumbnail (e.g. a bigger one) that can’t be loaded, it falls back to the original one.

The failed requests are still visible in the browser console, for the developer to see.

In the following example we have a gallery with 5 thumbnails, where one of them doesn’t exist. This thumbnail is skipped and is not shown in the gallery. Furthermore, the library requests a bigger thumbnail for the image onlythethumbnail_t.jpg, but this is the only existing thumbnail. Hence, the library falls back to the original one (the low quality image in the example). The console shows some errors about the nonexistent images.

<div id="gallery" class="justified-gallery">
  <a href="photo1_b.jpg">
    <img alt="Abu Dhabi Skyline" src="photo1_m.jpg" />
  </a>
  <a href="INEXISTENT_IMAGE.jpg">
    <img alt="Audi with Dubai Skyline" src="INEXISTENT_THUMBNAIL.jpg" />
  </a>
  <a href="photo3_b.jpg">
    <img alt="Corno Alle Scale Startrails" src="photo3_m.jpg" />
  </a>
  <a href="onlythethumbnail_t.jpg">
    <img alt="These are the colors I love" src="onlythethumbnail_t.jpg" />
  </a>
  <a href="photo5_b.jpg">
    <img alt="Corno Alle Scale Sunset" src="photo5_m.jpg" />
  </a>
</div>

import { JustifiedGallery } from 'justified-gallery';
import 'justified-gallery/style.css';

const container = document.getElementById('gallery');
const gallery = new JustifiedGallery(container, {
  lastRow: 'justify',
  rowHeight: 160,
  sizeRangeSuffixes: {
    lt100: '_t',
    lt240: '_m',
    lt320: '_n',
    lt640: '_z',
    lt1024: '_b',
  },
});
gallery.init();