Mobile-friendly Gallery Lightbox Plugin - jQuery DNlightBox

DNlightBox is a fully responsive, mobile-compatible jQuery gallery lightbox that automatically expands & shrinks the modal popup to fit the screen size.

The plugin supports both single and grouped images. Your visitors are able to navigate between grouped images in the galley lightbox with interacitve arrows.

How to use it:

1. Import the latest jQuery and the DNlightBox plugin's files into the html page.

<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src='js/lightBox.js'></script>

2. Initialize the jQuery DNlightBox plugin and we're ready to go.

$.DNLightBox();

3. Apply the lightbox to a single image.

• data-title: image caption
• data-group: image group

<img class="js-lightBox" 
     data-title="Image Caption" 
     data-group="single"  
     src="1.jpg" 
>

4. Apply the gallery lightbox to a set of images which have the same group name.

• data-title: image caption
• data-group: image group

<img class="js-lightBox" 
     data-title="Image Caption 1" 
     data-group="example"  
     src="1.jpg" 
>

<img class="js-lightBox" 
     data-title="Image Caption 2" 
     data-group="example"  
     src="2.jpg" 
>

<img class="js-lightBox" 
     data-title="Image Caption 3" 
     data-group="example"  
     src="3.jpg" 
>

...

5. Specify the animation speed when transitioning between images.

$.DNLightBox({
  speed: 500 // default: 'fast'
});

6. Specify the magnification factor of the image.

$.DNLightBox({
  scale: 1 // default:.8
});

---

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