Here we have a
div, with the id
basicExample, that has a list of links that point to
some images (original size images), and where inside of each link there is a thumbnail. Calling Justified
Gallery, the disposition of all the thumbnails is changed to fill all the spaces (justification).
An important configuration of the plugin is the
rowHeight. Consider that you
have set an height of 160px; the algorithm tries to build rows with that height:
However, the justification may resize the images, and, as a consequence, the row height may be a little bit
different than 160px. This means that the row height is intended as your preferred height (i.e. a lower bound).
You can always use the
option to limit the height of the rows; but remember that this option will crop the images if the images
needed to be bigger to be justified.
This algorithm builds each row until it reaches the last. But, this last row may not have enough images to fill
the entire width. In this case you can decide (with the
lastRow option) to leave a blank
space, to justify the images, or to hide the last row if there is too much blank space.
If in the server-side you have different sizes of the same images (e.g. a thumbnail for small devices, a bigger
thumbnail for retina displays, etc.),
the plugin can be set to automatically load the best available thumbnails: bigger or smaller thumbnails are
loaded to always have an high quality of
To do that you simply have to change the setting
sizeRangeSuffixes. For example,
to agree with the Flickr's suffixes, you have to
this setting in the following way:
In this way the plugin derives the path of the other thumbnails for the same image only changing the filenames
For example, with an entry with the thumbnail
path/to/image1_t.jpg, the plugin could load the
By default, the plugin is configured to only use the thumbnail that is provided in the HTML. To do that, it uses the following configuration:
Explore all the options available for Justified Gallery