In this example we use the Colorbox. To do this we create a listener for the jg.complete
callback to initialize Colorbox. Note that we are also using the rel = 'gallery2'
option, that sets to 'gallery1' the rel
attribute for all the links. In this way Colorbox can create a group of images.
<div id="colorboxExample"> <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> $('#colorboxExample').justifiedGallery({ lastRow : 'nojustify', rowHeight : 100, rel : 'gallery1', //replace with 'gallery1' the rel attribute of each link margins : 1 }).on('jg.complete', function () { $(this).find('a').colorbox({ maxWidth : '80%', maxHeight : '80%', opacity : 0.8, transition : 'elastic', current : '' }); });
In this example we use the Swipebox. To do this we use again a listener for the jg.complete
callback.
Unfortunately, due to a Swipebox's misteriousely bug, the simple code:
$(this).find('a').swipebox();doesn't work properly. In this way Swipebox activate itself for all photos in the same page. One needs to select the gallery using a complete selector like the following:
$('#swipeboxExample a').swipebox();Look at the following code for a complete example:
<div id="swipeboxExample"> <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> $('#swipeboxExample').justifiedGallery({ lastRow : 'nojustify', rowHeight : 100, rel : 'gallery2', margins : 1 }).on('jg.complete', function () { $('#swipeboxExample a').swipebox(); });
The three galleries are created with a single call to the plugin. Note that, to create the Colorbox groups, the images have different rel
tags.
<div class="myExMul" > <a href="photos/8083451788_552becfbc7_b.jpg" title="What's your destination?" rel="myExMul-1"> <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" rel="myExMul-1"> <img alt="Just in a dream Place" src="photos/7948632554_01f6ae6b6f_m.jpg" /> </a> ... </div> <div class="myExMul" > <a href="photos/7222046648_5bf70e893a_b.jpg" title="Simply my Brother" rel="myExMul-2"> <img alt="Simply my Brother" src="photos/7222046648_5bf70e893a_m.jpg" /> </a> <a href="photos/7002395006_29fdc85f7a_b.jpg" title="Freedom" rel="myExMul-2"> <img alt="Freedom" src="photos/7002395006_29fdc85f7a_m.jpg" /> </a> ... </div> <div class="myExMul" > <a href="photos/6791628438_affaa19e10_b.jpg" title="This is the colors I love" rel="myExMul-3"> <img alt="This is the colors I love" src="photos/6791628438_affaa19e10_m.jpg" /> </a> <a href="photos/6916180091_9c9559e463_b.jpg" title="The Hope" rel="myExMul-3"> <img alt="The Hope" src="photos/6916180091_9c9559e463_m.jpg" /> </a> ... </div> $('.myExMul').justifiedGallery({ rowHeight : 50 }).on('jg.complete', function () { $(this).find('a').colorbox({ maxWidth : '80%', maxHeight : '80%', opacity : 0.8, transition : 'elastic', current : '' }); });
To set the rel automatically, just call the Justified Gallery inside a foreach.
$('.myExMul').each(function (i, el) { $(el).justifiedGallery({rel: 'myExMul-' + i}).on('jg.complete', function () { $(this).find('a').colorbox({ maxWidth : '80%', maxHeight : '80%', opacity : 0.8, transition : 'elastic', current : '' }); }); });
To use the Swipebox it's a little hard again due to the same bug. You need to call it once, and to select all the images in one selector.
$('.myExMul').each(function (i, el) { $(el).justifiedGallery({rel: 'myExMul-' + i}).on('jg.complete', function () { if (i == 1) $('.myExMul a').swipebox(); }); });