Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

Simple Image Gallery with jQuery

/
/

This Tutorial is focused on creating simple image gallery with 3 lines of jQuery & little css code to create fade effects.

Image Gallery with jQuery
Image Gallery with jQuery

jQuery Code

	jQuery('.photo-thumbnails .thumbnail').click(function() {
jQuery('.photo-thumbnails .thumbnail').removeClass('current');
jQuery(this).addClass('current');
var path = jQuery(this).find('img').attr('src');
jQuery('#big-photo img').attr('src', path);
});

Explanation

jQuery('.photo-thumbnails .thumbnail').removeClass('current');

The above is used to Setting class “current” to the thumbnail that was clicked.

var path = jQuery(this).find('img').attr('src');

The above line is used to get the “src” attribute of the image that was clicked.

jQuery('#big-photo img').attr('src', path);

The above code is used to Set the “src” attribute of the big image

CSS Code

.gallery-photos {
padding: 20px;
}
.gallery-photos .big-photo {
display: block;
background-color: #ffffff;
padding: 3px;
border: 1px solid #e7e7e7;
margin-right: 210px;
}
.gallery-photos .big-photo img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
float: right;
width: 210px;
}
.gallery-photos .photo-thumbnails .thumbnail {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 30%;
height: 63px;
cursor: pointer;
padding: 3px;
border: 1px solid #e7e7e7;
margin-left: 3.33333%;
margin-bottom: 6px;
opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
opacity: 1;
background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner {
height: 100%;
overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
display: block;
width: auto;
max-height: 100%;
margin: 0 auto;
}

HTML Code

<div class="gallery-photos clearfix">
<div class="photo-thumbnails">
<div class="thumbnail current">
<div class="thumbnail-inner"> <img src="images/1.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/2.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/3.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/4.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/5.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/6.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/7.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/8.jpg" alt="" /> </div>
</div>
<div class="thumbnail">
<div class="thumbnail-inner"> <img src="images/9.jpg" alt="" /> </div>
</div>
</div>
<div id="big-photo" class="big-photo"> <img src="images/1.jpg" alt="" /> </div>
</div>

View Live Demo

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedbacks are always welcome!

Thanks!

  • Facebook
  • Twitter
  • Google+
  • Linkedin