Justified Gallery lightbox


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 : ''
	});
});

Swipebox

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();

});

Multiple gallery with one call Colorbox

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 : ''
		});
	});
});

Gallery 1

Gallery 2

Gallery 3

Multiple gallery with one call swipebox

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();
	});
});