Google+ Albums Like Photo Gallery Plugin For jQuery - collagePlus

collagePlus is a responsive jQuery plugin that allows you to create a Google+ albums like photo gallery with animated image caption overlay support.

How to use it:

1. Include jQuery library and other necessary javascript files on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.collagePlus.js"></script>
<script src="extras/jquery.removeWhitespace.js"></script>
<script src="extras/jquery.collageCaption.js"></script>

2. Markup html structure

<div class="demo">
<div class="Image_Wrapper" data-caption="Image Caption 1"><a href="#"><img src="1.jpg"></a></div>
<div class="Image_Wrapper" data-caption="Image Caption 2"><a href="#"><img src="2.jpg"></a></div>
<div class="Image_Wrapper" data-caption="Image Caption 3"><a href="#"><img src="3.jpg"></a></div>
<div class="Image_Wrapper" data-caption="Image Caption 4"><a href="#"><img src="4.jpg"></a></div>
<div class="Image_Wrapper" data-caption="Image Caption 5"><a href="#"><img src="5.jpg"></a></div>
<div class="Image_Wrapper" data-caption="Image Caption 6"><a href="#"><img src="6.jpg"></a></div>
</div>

3. The javascript

<script type="text/javascript">
$(window).load(function () {
$(document).ready(function(){
collage();
});
});

function collage() {
$('.Collage').removeWhitespace().collagePlus(
{
'fadeSpeed' : 2000,
'targetHeight' : 200
}
).collageCaption();
};
 
var resizeTimer = null;
$(window).bind('resize', function() {
// hide all the images until we resize them
$('.Collage .Image_Wrapper').css("opacity", 0);
// set a timer to re-apply the plugin
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(collage, 200);
});

</script>

Change log:

v0.3.3 (2013-12-08)

• adding support for multiple instances.

v0.3.2 (2013-08-20)

• fixing IE error where a default setting was badly named causing the error

v0.3.1 (2013-08-02)

• adding new extend syntax to allow multiple instances
• adding parameter to enable images to either be full width or partial on the last row. This is to stop images from stretching too much.

v0.3.0 (2013-07-17)

• added the transition effects

---

This awesome jQuery plugin is developed by ed-lea. For more Advanced Usages, please check the demo page or visit the official website.