Google+ Albums Like Photo Gallery Plugin For jQuery - collagePlus
File Size: | 1.94 MB |
---|---|
Views Total: | 10402 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.