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!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/06/Image-Gallery-with-jQuery.pnghttp://w3lessons.info/wp-content/uploads/2013/06/Image-Gallery-with-jQuery-150x150.pngKarthikeyan KCSS3FreebiesjqueryDesign,freebies,Jquery
This Tutorial is focused on creating simple image gallery with 3 lines of jQuery & little css code to create fade effects.jQuery CodeExplanationThe above is used to Setting class 'current' to the thumbnail that was clicked.The above line is used to get the 'src' attribute of the image that was...