Here we have a div
, with the id myExample0
, 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). The images can be changed: bigger or smaller thumbnails can be loaded to always have an high quality.
The plugin knows the path of the other thumbnails of the same image changing the filenames suffix. For example, if in a link there is the thumbnail path/to/image1_t.jpg
, the plugin can be load the thumbnails path/to/image1_b.jpg
. The default suffixes are the same of Flickr (and this permits a smooth integration with this service).
Remember that the default value for the rowHeight is 120
. For this example the thumbnails with a longest side of 240px (i.e. _m
suffix) is a good choice to have be fast (i.e. the plugin doesn't need to reload the majority of all thumbnails).
<div id="basicExample"> <a href="photos/8083451788_552becfbc7_b.jpg" title="What's your destination?"> <img alt="What's your destination?" src="photos/8083451788_552becfbc7_m.jpg" /> </a> <a href="photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place"> <img alt="Just in a dream Place" src="photos/7948632554_01f6ae6b6f_m.jpg" /> </a> ... </div> $("#basicExample").justifiedGallery();
This is an example where we use smaller images (rowHeight : 70
). To be faster, in this case we use smaller thumbnails (i.e. the _t
suffix, longest side of images is less than 100px). In this way the plugin probably will not load other thumbnails.
Remember that the rowHeight
is an approximation for the row heights. The final row heights can be higher to reduce the image crops. You can also set a maximum value for the height, using the option maxRowHeight
.
Furthermore, note that in this example we don't justify the last row (lastRow : 'nojustify'
), and also that we are using a margin of 5px (margins : 5px
).
<div id="myExample1"> <a href="photos/8083451788_552becfbc7_b.jpg" title="What's your destination?"> <img alt="What's your destination?" src="photos/8083451788_552becfbc7_t.jpg" /> </a> <a href="photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place"> <img alt="Just in a dream Place" src="photos/7948632554_01f6ae6b6f_t.jpg" /> </a> ... </div> $('#myExample1').justifiedGallery({ rowHeight : 70, lastRow : 'nojustify', margins : 3 });