jQuery Lightbox Plugin

Accessible, responsive and configurable jQuery lightbox plugin

Usage

1. Include jQuery and dependencies:

   <script src="path/to/jquery.min.js"></script>

2. Include plugin's code:

   <script src="path/to/jquery.lightbox.js"></script>

3. Prepare the HTML for the lightbox(es):

   <button data-open-lightbox="lightbox1">Ouvrir la lightbox</button>
   <div data-lightbox-id="lightbox1" class="lightbox" data-gallery="gallery1">
       <div class="lightbox-wrapper">
           <p>Lightbox1</p>
           <button data-close-lightbox="lightbox1">Fermer la lightbox</button>
       </div>
   </div>
   
   <button data-open-lightbox="lightbox2">Ouvrir la lightbox</button>
   <div data-lightbox-id="lightbox2" class="lightbox" data-gallery="gallery1">
       <div class="lightbox-wrapper">
           <p>Lightbox2</p>
           <button data-close-lightbox="lightbox2">Fermer la lightbox</button>
       </div>
   </div>

4. Call the plugin:

   // Default configuration
   $('.lightbox-element').lightbox();
   
   // Custom configuration
   $('.lightbox-element').lightbox({
       keepFocusInside: false,
       createGallery: true
   });

Downloads

• Source
• Minified version

Configuration

keepFocusInside

Type: Boolean
Default value: true

Keep focus inside the lightbox (can't focus behind it)

---

elementToFocus

Type: String
Default value: null

Element to focus on lightbox open

---

isJsAnimation

Type: Boolean
Default value: true

If js animation is activated

---

createGallery

Type: Boolean
Default value: false

Create a gallery of lightboxes with lightboxes called with the same "data-gallery"

Navigation will be added to the lightbox wrapper (next and prev)

---

loop

Type: Boolean
Default value: false

Loop through all lightboxes in the gallery or stop at the end

---

animation

Type: String
Default value: "fade"

Animation of the lightbox entering the view ("fade" or empty for no animation)

---

animationTime

Type: Integer
Default value: 250

Time of the animation in ms

---

Public Methods (API)

.open()

var lightbox = $('.element').open();

lightbox.open();

---

Labels

labels: {
    navigationPrev: 'Précédent',
    navigationNext: 'Suivant'
}

Classes

classes: {
 	prev: 'prev',
    next: 'next',
    navigationPrev: "lightbox-prev-button",
    navigationNext: "lightbox-next-button",
    visuallyhidden: 'visuallyhidden',
    states: {
        active: 'is-active',
        inactive: 'is-inactive'
    }
}

History

Check Releases for detailed changelog.