Vertical jQuery Product Photo Gallery - PhotoGallery

PhotoGallery is a jQuery based photo gallery for showcasing you product images with thumbnails and fancybox plugin integrated to provide image zoom functionality.

See also:

• Simple Clean jQuery Vertical Product Image Gallery
• Clean and Multi-Functional jQuery Gallery Plugin - kGallery

Basic Usage:

1. Include necessary jQuery library and jQuery fancybox plugin in the html document.

<link rel="stylesheet" href="fancybox/jquery.fancybox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="fancybox/jquery.fancybox.js"></script> 

2. Create the image gallery following the html structure like this.

<div class="gallery clearfix">
<div class="pics clearfix">
<div class="thumbs">
<div class="preview"> <a href="#" class="selected" data-full="images/1.jpg" data-title="Title 1"> <img src="images/1.jpg"/> </a> </div>
<div class="preview"> <a href="#" class="selected" data-full="images/2.jpg" data-title="Title 2"> <img src="images/2.jpg"/> </a> </div>
<div class="preview"> <a href="#" class="selected" data-full="images/3.jpg" data-title="Title 3"> <img src="images/3.jpg"/> </a> </div>
...
</div>
<a href="images/1.jpg" class="full" title="Title 1"> 
<img src="images/1.jpg"> </a> </div>
</div>

3. The required CSS to style the gallery.

.gallery {
width: 507px;
margin: 0 auto;
position: relative;
}
.pics {
width: 542px;
margin-top: 70px;
padding: 10px;
background: white;
border-radius: 2px;
box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.05);
}
.thumbs {
float: left;
width: 122px;
padding-right: 10px;
}
.preview {
width: 112px;
height: 112px;
overflow: hidden;
margin-bottom: 10px;
}
.preview:last-child {
margin-bottom: 0;
}
.full {
width: 400px;
font-size: 12px;
float: left;
}
.full, .full img {
height: 600px;
}
.previews a:hover, .previews a.selected {
}
.full img:hover {
cursor: pointer;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

4. The jQuery script to enable the image gallery.

<script>
$(document).ready(function(){

$(".preview a").on("click", function(){
$(".selected").removeClass("selected");
$(this).addClass("selected");
var picture = $(this).data();

event.preventDefault(); //prevents page from reloading every time you click a thumbnail

$(".full img").fadeOut( 100, function() { 
$(".full img").attr("src", picture.full);
$(".full").attr("href", picture.full);
$(".full").attr("title", picture.title);

}).fadeIn();

});// end on click

$(".full").fancybox({
helpers : {
title: {
type: 'inside'
}
},
closeBtn : true,
});

});//end doc ready

</script>

---

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