Errors Handling


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

The rules are simple:

  • The plugin try to load the given thumbnail. In case of an error the plugin ignores the thumbnail, and continue to build the layout with the other thumbnails.
  • If the plugin needs a different thumbnail (e.g. a bigger one) that can't be loaded, it simply leaves 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 is inexistent. This thumbnail is ignored and is not shown in the gallery. Furthermore, the plugin requests a bigger thumbnail for the image onlythethumbnail_t.jpg, but this is the only existent thumbnail. Hence, the plugin leaves the original one (the low quality image in the example). You can see that the console will show you some errors about the inexistent images.

<div id="notFoundExample" >
    <a href="photo1_b.jpg">
        <img alt="Peace of mind" src="photo1_m.jpg" />
    </a>
    <a href="INEXISTENT_IMAGE.jpg">
        <img alt="Abu Dhabi" src="INEXISTENT_THUMBNAIL.jpg" />
    </a>
    <a href="photo3_b.jpg">
        <img alt="Above the World" 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="Deep sea" src="photo5_m.jpg" />
    </a>
</div>

$('#notFoundExample').justifiedGallery({
    lastRow: 'justify',
    rowHeight: 160,
    sizeRangeSuffixes: {
        lt100 : '_t', 
        lt240 : '_m', 
        lt320 : '_n', 
        lt500 : '', 
        lt640 : '_z', 
        lt1024 : '_b'
    }
});