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

Bootstrap : Powerful front-end framework for faster and easier web development

Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. In June 2014 it was the No.1 project on GitHub with 69,000+ stars and 25,000+ forks, with a user base including MSNBC and NASA.

Check out the Components: Bootstrap Components

Concise: Front-End Framework with Object-Oriented CSS Principles

Concise is built so that you have a lot of options handed to you out of the box. It comes built from the ground-up to be mobile friendly and includes a simple grid system, beautiful typography, and a few other bells and whistles. However, it is also built super lean, with a little over 2,000 thousand lines of CSS, and a few hundred lines of JavaScript. Concise is specifically built to be customized, tinkered with, and hacked.

Demo: http://concisecss.com/

JBox jQuery Plugin for Modal Windows, Tooltips & Notices

jBox is a powerful and flexible jQuery plugin, taking care of all your modal windows, tooltips, notices and more. You can use jQuery selectors to add tooltips to elements easily. You can set up modal windows the same way as tooltips. But most of times you’d want more variety, like a title or HTML content. The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior.

Demo: http://stephanwagner.me/jBox

Display live data on your site - Use Google Chart API

Google chart tools are powerful, simple to use, and free. Try out Google's rich gallery of interactive charts and data tools.

Demo : https://developers.google.com/chart/