Responsive Lightbox Gallery Plugin With jQuery And Bootstrap - Modallery

Modallery is a lightweight, responsive jQuery/Bootstrap lightbox gallery plugin which display a group of images in a Bootstrap modal with arrow/keyboard/thumbnail navigation.

How to use it:

1. Download and insert the following JavaScript and CSS files into your Bootstrap project.

<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.modallery.min.css">
<!-- JavaScript -->
<script src='jquery.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='bootstrap.modallery.min.js'></script>

2. Add the CSS class 'modallery' to your images as these:

• data-to: the larger version of your image.
• data-caption: the image caption/description

<img src="sm-1.jpg" 
     data-to="lg-1.jpg" 
     data-caption="Caption 1"
     class="modallery">

<img src="sm-2.jpg" 
     data-to="lg-2.jpg" 
     data-caption="Caption 2"
     class="modallery">

<img src="sm-3.jpg" 
     data-to="lg-3.jpg" 
     data-caption="Caption 3"
     class="modallery">

...

3. Initialize the lightbox gallery plugin and done.

$(document).modallery();

4. Default parameters which can be passed as a JS object to the modallery() method.

$(document).modallery({

  // gallery title
  title: 'Image Gallery',

  // selector
  caller: '.modallery',

  // modal size
  size: '',

  // enable thumbnail navigation
  navigate: false,

  // enable navigation arrows
  arrows: false,

  // enable arrow keys
  keypress: false,

});

---

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