Dynamic Group Image Lightbox Plugin With jQuery - Darkbox.js

Dynamic Group Image Lightbox Plugin With jQuery - Darkbox.js
File Size: 45.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.