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.

How to use it:

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.

$('#gallery').darkbox(myGallery)

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

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

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

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

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

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

8. Execute a function when the lightbox is closed.

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

9. Decide whether to show gallery title and progress bar.

$('#gallery').darkbox(myGallery,{
  showProgressBar: true,
  showTitle: false
})

Change log:

2017-11-23

• Added 'wait for load'

2017-11-23

• Added progressbar

2017-11-21

• now callable on element as a jquery function

2017-11-20

• Added eslint rules, switched to ES6 for more readability, created minified version of script

---

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