Dynamic Group Image Lightbox Plugin With jQuery - Darkbox.js

Dynamic Group Image Lightbox Plugin With jQuery - Darkbox.js

Darkbox.js is a lightweight, responsive, dynamic jQuery lightbox plugin which displays a group of images in a fullscreen popup window with support for keyboard navigation.

1. Download and put the jQuery Darkbox.js plugin's files into the web page.

<!-- jQuery -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Darkbox plugin files -->
<link rel="stylesheet" href="darkbox.css">
<script src="darkbox.js"></script>

2. Create an array of images to be presented in the lightbox popup.

var myGallery = [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    ...
]

3. Insert the first image into the web page.

<img id="gallery" src="1.jpg">

4. The JavaScript to activate the image lightbox.

darkbox.start( 
  $('#gallery'), 
  {
    images: myGallery
  }
);

5. Disable/enable the page scrolling when the lightbox is opened.

darkbox.start( 
  $('#gallery'), 
  {
    images: myGallery,
    disablePageScrolling: true
  }
);

6. Add the current image to the first if needed.

darkbox.start( 
  $('#gallery'), 
  {
    images: myGallery,
    startWithCurrent: true
  }
);

7. Auto jump to the first image when you reach the last one.

darkbox.start( 
  $('#gallery'), 
  {
    images: myGallery,
    wrapAround: true
  }
);

8. Execute a function when the lightbox is closed.

darkbox.start( 
  $('#gallery'), 
  {
    images: myGallery,
    endCallback: null
  }
);

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

  • Publication date: 16.11.2017
  • Source