Create 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:

 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);  
 });  

CSS:

 .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:

 <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>  

Screenshot:

View the Demo