Easy Image Lightbox Plugin with jQuery and Bootstrap - bootstraplightbox

Bootstrap lightbox is a lightweight jQuery plugin for displaying large images in a navigatable gallery lightbox using Bootstrap modal component.

How to use it:

1. The plugin requires jQuery library and Bootstrap framework loaded in the html document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the jQuery bootstraplightbox plugin's files in the document.

<link rel="stylesheet" href="css/bootstraplightbox.css">
<script src="js/bootstraplightbox.js"></script>

3. Insert a thumbnail image into the webpage.

• Add data-toggle="lightbox" to the image tags you want to be able to open in the lightbox
• Add data-href attribute that points to a high res image that will be shown in the lightbox. If the attribute is missing, the lightbox uses src attr to search for image.
• Add data-target="#demoLightbox" where #demoLightbox is an ID of the lightbox schema.

<img src="1.jpg" 
     data-toggle="lightbox" 
     data-href="large-1.jpg" 
     data-target="#demoLightbox"
>

4. Create a modal window for the image lightbox. In this modal you need to add an img tag with lightbox-image class name. Bootstrap Image Lightbox will render high resolution image at this place.

<div id="demoLightbox" class="lightbox modal fade"  tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-screenshot">
    <div class="lightbox-content">
      <a class="lightbox-left" href="javascript:lightbox.modal.prev()" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <img src="" class="lightbox-image" />
      <a class="lightbox-right" href="javascript:lightbox.modal.next()" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a> 
    </div>
  </div>
</div>

5. More data attributes.

• fitwidth: auto-resize a large image so that it fits into a smaller lightbox.

<img src="1.jpg" class="lightbox-thumbnail" 
     data-toggle="lightbox" 
     data-target="#demoLightbox" 
     data-option="fitwidth" 
     data-href="large-1.jpg"
>

---

This awesome jQuery plugin is developed by mflenov. For more Advanced Usages, please check the demo page or visit the official website.