Simple Clean jQuery Vertical Product Image Gallery

A minimal jQuery based image gallery that has the ability to display the full size of an image on the right size of thumbnails. Similar to those you seen on most E-commerce websites that can be used to showcase the details of a product.

How to use it:

1. Create the html to build a product gallery with thumbnails. Use data-full attribute to specify the sources of your full size images.

<div class="container clearfix">
<div class="gallery">

<div class="previews"> 
<a href="#" class="selected" data-full="images/top1large.jpg"><img src="images/top1small.jpg" /></a> 
<a href="#" data-full="images/top2large.jpg"><img src="images/top2small.jpg" /></a> 
<a href="#" data-full="images/top3large.jpg"><img src="images/top3small.jpg" /></a> 
<a href="#" data-full="images/top4large.jpg"><img src="images/top4small.jpg" /></a> 
<a href="#" data-full="images/top5large.jpg"><img src="images/top5small.jpg" /></a> 
</div>

<div class="full"> 
<!-- first image is viewable to start --> 
<img src="images/top1large.jpg" /> 
</div>

</div>
</div>

2. The sample CSS to style the gallery.

.container {
width: 960px;
margin: 0 auto;
padding: 20px;
padding-bottom: 40px;
font-family: 'Calibri', 'CalibriRegular', Verdana, Arial, Helvetica, sans-serif;
}
.gallery {
}
.gallery .previews, .gallery .full, .gallery .desc {
float: left;
margin-right: 10px;
}
.gallery .desc, .gallery .full {
width: 400px;
font-size: 12px;
}
.gallery .desc h2 {
margin-top: 0;
}
.gallery .previews a {
display: block;
margin-bottom: 10px;
}
.gallery .full, .gallery .full img {
height: 600px;
}
.gallery .previews a, .gallery .full {
border: 4px solid #eee;
}
.gallery .previews a:hover, .gallery .previews a.selected {
border: 4px solid #777;
}
.gallery .full img:hover {
cursor: pointer;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}

3. Include the latest version of jQuery javascript library at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

4. Optionally, the plugin can be integrate with other plugin to provide advanced functionalities like lightbox, image zoom, etc.

<link rel="stylesheet" href="fancybox/jquery.fancybox.css">
<script src="fancybox/jquery.fancybox.js"></script> 

5. The jQuery script.

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

$('a').click(function(){
var largeImage = $(this).attr('data-full');
$('.selected').removeClass();
$(this).addClass('selected');
$('.full img').hide();
$('.full img').attr('src', largeImage);
$('.full img').fadeIn();
}); 

$('.full img').on('click', function(){
var modalImage = $(this).attr('src');
$.fancybox.open(modalImage);
});

}); 
</script>

---

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