Errors Handling

In Justified Gallery the errors are handled in a very smart way, without hurting the user with strange messages, trying to recover whatever is possible.

The rules are simple:

• The library tries to load the given thumbnail. In case of an error it ignores the thumbnail, 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 simply keeps the old one.

The errors are still visible in the console, to be seen by the developer.

In the following example we have a gallery with 5 thumbnails, where one of them doesn’t exist. This thumbnail is ignored 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 keeps the original one (the low quality image in the example). You can see that the console will show some errors about the nonexistent images.

<div id="notFoundExample" 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>

new JustifiedGallery(document.querySelector('#notFoundExample'), {
  lastRow: 'justify',
  rowHeight: 160,
  sizeRangeSuffixes: {
    lt100: '_t',
    lt240: '_m',
    lt320: '_n',
    lt640: '_z',
    lt1024: '_b',
  },
}).init();