Justified Grid Image Gallery

The Justified Grid Gallery widget is for displaying images with different sizes and aspect ratios. The gallery uses separate thumbnail images for faster page download time in the browser. Rather than having to crop out equal size thumbnails from the full size image, they can have different aspect ratios and the script will organise them into rows. This means that the thumbnails can be created from the full size images quickly by duplicating them and then reducing their height in Preview.app to that of the row height.
The number of images per row at any given screen or device width will depend on the value for row height. The lower the value the greater the number of thumbnails per row.
With responsive grids like this, unequal size images will create blanks at the end of the bottom row at certain device or browser widths. This gallery has an option to justify the last row so that there is no blank space. If viewing this page on a computer reduce the browser width to see this effect.
The grid has two controls for spacing - one adjusts the spacing betweeb the thumbnails and the other adjusts the padding around the the grid. In this demo, both are set to zero.
In this example, the thumbnails show a caption on hover when viewed on computers. When viewed on a touch device like an iPad or iPhone, the captions appear on page load.
The captions are derived from the alt text attribute so it is essential to enter keywords even if the captions are not being displayed. Captions can be displayed for the thumbnails or the large images - or both.
The gallery is created by combining the Justified Gallery Grid script to create the grid with the Simple Lightbox script to create the lightbox slideshow.
The slideshow can be navigated using the previous/next arrows or grab and drag on computers. On touch devices, the arrows disappear and the slides can be swiped.
The full size images have controls to adjust the width and height ratios. These are used to adjust the slider size for images with a very high or very low aspect ratio.
The heading and this text are also part of the widget and there is an optional footer for creating a fully responsive page. The heading and text can be switched to be placed above the gallery grid if required.