Using lightbox2 with Bootstrap 3

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

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>

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

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

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