Vertical jQuery Product Photo Gallery - PhotoGallery

File Size: 1.43 MB
Views Total: 12103
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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=""></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>
<a href="images/1.jpg" class="full" title="Title 1"> 
<img src="images/1.jpg"> </a> </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.


$(".preview a").on("click", function(){
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);


});// end on click

helpers : {
title: {
type: 'inside'
closeBtn : true,

});//end doc ready


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