jQuery Plugin For Single Page Gallery with Animated Captions - Gallery Module

Gallery Module is a lightweight yet robust jQuery plugin for creating a single page image gallery with animated hover captions. When clicking on an image, the plugin will switch to the gallery slider mode that you can navigate through images with next/prev arrows.

How to use it:

1. Include jQuery library and other necessary javascript libraries at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="js/jquery.scrollTo.min.js"></script> 
<script src="js/gallery-module.js"></script> 

2. Include the required CSS file in the head section of the page.

<link href="css/styles.css" rel="stylesheet" type="text/css">

3. The markup html structure.

<section id="ui-gallery-main" class="ui-gallery-grid">

<div class="gallery-ui-record item-1" data-category="digital"> <a href="01.jpg">
<div class="start"><img src="images/01.jpg" alt="Artwork by Carlos Huante" /></div>
<div class="hover"><img src="images/01-hover.jpg" alt="Artwork by Carlos Huante" /></div>
<div class="caption">
<p> <span class="cap-1">Workshop Demo</span> <span class="cap-2"><img src="images/icon.png" alt="Caption Space" /></span> <span class="cap-3">Artwork by Carlos Huante</span> </p>
</div>
</a> </div>

<div class="gallery-ui-record item-2" data-category="digital"> <a href="02.jpg">
<div class="start"><img src="images/02.jpg" alt="Artwork by Carlos Huante" /></div>
<div class="hover"><img src="images/02-hover.jpg" alt="Artwork by Carlos Huante" /></div>
<div class="caption">
<p> <span class="cap-1">Spiderwick</span> <span class="cap-2"><img src="images/icon.png" alt="Caption Space" /></span> <span class="cap-3">Artwork by Carlos Huante</span> </p>
</div>
</a> </div>

<div class="gallery-ui-record item-3" data-category="digital"> <a href="03.jpg">
<div class="start"><img src="images/03.jpg" alt="Artwork by Carlos Huante" /></div>
<div class="hover"><img src="images/03-hover.jpg" alt="Artwork by Carlos Huante" /></div>
<div class="caption">
<p> <span class="cap-1">Bullman</span> <span class="cap-2"><img src="images/icon.png" alt="Caption Space" /></span> <span class="cap-3">Artwork by Carlos Huante</span> </p>
</div>
</a> </div>
<!-- /.gallery-ui-record-->
</section>

4. Initialize the plugin on document ready.

<script>
GalleryModule.init({
transition : "block" // scale or block
});
</script>

---

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