Justified Gallery Examples

<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_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>

$("#myExample1").justifiedGallery({
	'rowHeight' : 110, 
	'usedSizeRange' : 'lt240', 
	'margins' : 5,
	'target' : '_blank' //replace all links targets, to open images in another page
});

An example where we use smaller images, and we don't justify the last row. Look at the usedSizeRange that is lt100 because is very lickely that the used images are quite small. Now we use also the callback onComplete to set the colorbox.

<div id="myExample2">
	<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>

$("#myExample2").justifiedGallery({
	'usedSizeRange':'lt100', 
	'justifyLastRow':false, 
	'rowHeight':70, 
	'rel':'gallery2', //replace the rel of all the links, in this way colorbox consider it as a group.
	'margins':1,
	'onComplete': function(gal) {
		$(gal).find("a").colorbox({
			maxWidth : "80%",
			maxHeight : "80%",
			opacity : 0.8,
			transition : "elastic",
			current : ""
		});		
	}
});

To show the fixed height option. Look that the big images is cutted, because they have a maximum height that they need to respect.

<div id="myExample3">
	<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>

$("#myExample3").justifiedGallery({
	'rowHeight' : 200, 
	'usedSizeRange' : 'lt320', 
	'fixedHeight' : true, 
	'captions' : false, 
	'margins' : 2
});

Three gallery created with a single call to the plugin (foreach test). Note that, to create the colorbox groups, the images have differents rel tags.

<div class="myExample4" >
	<a href="photos/8083451788_552becfbc7_b.jpg" title="What's your destination?" rel="myEx4-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="myEx4-1">
		<img alt="Just in a dream Place" src="photos/7948632554_01f6ae6b6f_m.jpg" />
	</a>
	...
</div>
<div class="myExample4" >
	<a href="photos/7222046648_5bf70e893a_b.jpg" title="Simply my Brother" rel="myEx4-2">
		<img alt="Simply my Brother" src="photos/7222046648_5bf70e893a_m.jpg" />
	</a>
	<a href="photos/7002395006_29fdc85f7a_b.jpg" title="Freedom" rel="myEx4-2">
		<img alt="Freedom" src="photos/7002395006_29fdc85f7a_m.jpg" />
	</a>
	...
</div>
<div class="myExample4" >
	<a href="photos/6791628438_affaa19e10_b.jpg" title="This is the colors I love" rel="myEx4-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="myEx4-3">
		<img alt="The Hope" src="photos/6916180091_9c9559e463_m.jpg" />
	</a>
	...
</div>

$(".myExample4").justifiedGallery({
	'rowHeight':80, 
	'usedSizeRange':'lt240', 
	'onComplete': function(gal) {
		$(gal).find("a").colorbox({maxWidth:"80%",maxHeight:"80%",opacity:0.8,transition:"elastic", current:""});		
		//we can also can do:
		//$(".myExample4 a").colorbox({maxWidth:"80%",maxHeight:"80%",opacity:0.8,transition:"elastic", current:""});		
	}
});

Test with a gallery with 5 images, where an image with a wrong name that can't be loaded. An error message is shown.

<div id="myExample5" >
	<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/INEXISTENT_IMAGE.jpg" title="INEXISTENT_IMAGE">
		<img alt="Just in a dream Place" src="photos/INEXISTENT_IMAGE.jpg" />
	</a>
	...
</div>

$("#myExample5").justifiedGallery({
	'rowHeight':80, 
	'usedSizeRange':'lt240', 
});

To show how to use the Justified Gallery with only one type of images. In this case it use only the '_t' images that is very small, and this creates a low quality gallery. This can be done modifying the sizeRangeSuffixes setting and setting all the prefixes to the same. This is the case where you have only one type of thumbnail (e.g. "myimage_t.jpg") and the big original image (e.g. "myimage_b.jpg").

<div id="myExample6" >
	<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>

$("#myExample6").justifiedGallery({
	'sizeRangeSuffixes' : {
		'lt100':'_t', 
		'lt240':'_t', 
		'lt320':'_t', 
		'lt500':'_t', 
		'lt640':'_t', 
		'lt1024':'_t'
	},
	'rowHeight':250, 
	'usedSizeRange':'lt240', 
});