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.

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!