LightBox is a plug-in we use to create image gallery with the image overlay effects. Like you must have Google for some images once in your life and on clicking on a particular image, the size of the image zooms out which we define as an overlay effect. Without wasting any time let's start our tutorial on how to use this LightBox plug-in.

Step 1: You are required to download the plug-in. To download the same visit http://lokeshdhakar.com/projects/lightbox2/

Step 2: Extract the zip folder

Step 3: Create your webpage folder and copy paste the css, photos and js folder from the zip folder to your folder.

Step 4: Create an HTML page in your folder and name it as index.html

Step 5: Add references to jquery and css files.

<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script> 

Note: “it is recommended to put the jquery and js links before the </body> tag.”

Step 6: Copy and paste the below html code into your page

<div id="gallery">
       
    <ul>
       
       <li>
         <a href="http://www.intrawallpaper.com/static/images/Hawaii-Beach-Wallpaper-HD_8pA2vrZ.jpg" data-lightbox="image1">
           <img src="http://www.intrawallpaper.com/static/images/Hawaii-Beach-Wallpaper-HD_8pA2vrZ.jpg" alt="" />
         </a>
       </li>


       <li>
         <a href="http://www.intrawallpaper.com/static/images/hd-wallpaper-03_Ux4hBFT.jpg" data-lightbox="image2">
           <img src="http://www.intrawallpaper.com/static/images/hd-wallpaper-03_Ux4hBFT.jpg" alt="" />
         </a>
       </li>


       <li>
         <a href="http://www.intrawallpaper.com/static/images/hd-wallpaper-desktop-610x381.jpg" data-lightbox="image3">
           <img src="http://www.intrawallpaper.com/static/images/hd-wallpaper-desktop-610x381.jpg" alt="" />
         </a>
       </li>


       <li>
         <a href="http://www.intrawallpaper.com/static/images/HD-Wallpapers-C76.jpg" data-lightbox="HD-Wallpapers-C76" >
          <img src="http://www.intrawallpaper.com/static/images/HD-Wallpapers-C76.jpg" alt="" />
         </a>
       </li>

        
       <li>
         <a href="http://www.intrawallpaper.com/static/images/icelands_ring_road-3840x2160.jpg" data-lightbox="image5" >
           <img src="http://www.intrawallpaper.com/static/images/icelands_ring_road-3840x2160.jpg" alt="" />
         </a>
       </li>

    </ul>

</div>

You are required to add the "data-lightbox" attribute to an image link to enable the LightBox and the value to this attribute should be unique. But incase if there is a group of related images then assign same value to the data-lightbox attribute.

For example:

<a href="photos/image-1.jpg" data-lightbox="groupimage">Image 1</a>
<a href="photos/image-2.jpg" data-lightbox="groupimage">Image 2</a>
<a href="photos/image-3.jpg" data-lightbox="groupimage">Image 3</a>

Step 7: Add the style to your code..

<style type="text/css">
       
        #gallery {

            background-color: #5BC0DE;
            padding: 10px;
            width: 980px;
            margin: 0 auto;
        }

        #gallery ul {

            list-style: none;
        }

        #gallery ul li {

            display: inline;
            padding:20px ;
        }

        #gallery ul img {

            border: 5px solid #3e3e3e;
            border-width: 5px 5px 20px;
            width:120px;
            height: 120px;
            
        }

        #gallery ul a:hover img {

            border: 5px solid #fff;
            border-width: 5px 5px 20px;
            color: #fff;
        }

        #gallery ul a:hover {

            color: #fff;
        }

    </style>

LightBox plug-in is supported on the following browsers : Internet Explorer 6 ,7, 8; Chrome, Safari, Firefox, iOS Safari, iOS Chrome, Android Chrome. For Internet Explorer 9+ you may download the "lightbox-plus-jquery.js" file which includes jQuery v2.x.

And that's it... your image gallery is ready. Hope you find this blog helpful.

Happy Coding!