" I like who I'm becoming. "


Using lightbox2 with Bootstrap 3

Lightbox is used to show a larger version of an image on top of the current page when the smaller image is clicked. Click on the below image to see it in action

You can also create Lightbox gallery

To use lightbox in your webpage, first download the lightbox. Once downloaded include lightbox.css and lightbox.min.js in your webpage. Note that you add lightbox.min.js after including jquery 1.7 or greater

<link href="path/to/lightbox.css" rel="stylesheet"/>
<script src="path/to/lightbox.js"></script>

Don't forget to add jQuery its required otherwise lightbox will not work. Once required CSS and JS is added , use the attribute data-lightbox as shown below

           <a href="abc.jpg" data-lightbox="gallery" data-title=" Roads are my destination " >
           <img height="200" width="200" src="abc.jpg"></img>

data-title attribute is used to provide caption for the image. One last important point to remember while using lightbox2 is that once you download the lightbox2 you should copy the downloaded images (close.png, next.png, prev.png, loading.gif) into images folder of your project, as these images are referenced from lightbox.css To show a lightbox gallery use the same value for data-lightbox attribute for all the images as shown below

         <a href="a.jpg" data-lightbox="gallery" data-title=" Caption1 " >
           <img height="200" width="200" src="a.jpg"></img>

         <a href="b.jpg" data-lightbox="gallery" data-title=" Caption2 " >
           <img height="200" width="200" src="b.jpg"></img>

         <a href="c.jpg" data-lightbox="gallery" data-title=" Caption3 " >
           <img height="200" width="200" src="c.jpg"></img>

         <a href="d.jpg" data-lightbox="gallery" data-title=" Caption4 " >
           <img height="200" width="200" src="d.jpg"></img>

If you have any queries or suggestions, please mention it in the comments below.