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

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!