Imagelightbox

Image Lightbox, Responsive and Touch‑friendly

Download .zip Download .tar.gz View on GitHub

With activity indication

$('a[data-imagelightbox="a"]')
                        .imageLightbox({activity: true});
                

With overlay

$('a[data-imagelightbox="b"]')
                    .imageLightbox({overlay: true});
                

With "close" button

$('a[data-imagelightbox="c"]')
                    .imageLightbox({button: true, quitOnDocClick: false});
                

With caption

  • Just another sunset in Tanzania

                    $('a[data-imagelightbox="d"]')
                    .imageLightbox({caption: true});
                

With navigation


                    $('a[data-imagelightbox="e"]')
                    .imageLightbox({navigation: true});
                

With arrows

$('a[data-imagelightbox="f"]')
                    .imageLightbox({arrows: true});
                

All of the above

With manual trigger

dynamically adding

With history & permalinks

$('a[data-imagelightbox="hist"]')
                        .imageLightbox({history: true});
                
Call with ?imageLightboxIndex=2 added to the url to open the third image
(may need to add &imageLightboxSet=j as well because there are multiple examples)

History with ids

$('a[data-imagelightbox="hist"]')
                        .imageLightbox({history: true});
                
Add data-ilb2-id="img2" and call with ?imageLightboxIndex=img2 added to the url to open that image
(may need to add &imageLightboxSet=k as well because there are multiple examples)

Video support

Add data-ilb2-video to the link, containing the parameters of a HTML5 video tag as JSON. You can also
include a sources field - a list of source tags similarily encoded.

Press enter for fullscreen

Filter images by extension

Allow gif only

Events

$('a[data-imagelightbox="events"]').imageLightbox();
$(document)
.on("start.ilb2", function () { console.log("start.ilb2"); })
.on("loaded.ilb2", function () { console.log("loaded.ilb2"); })
.on("next.ilb2", function () { console.log("next.ilb2"); })
.on("previous.ilb2", function () { console.log("previous.ilb2"); })
.on("quit.ilb2", function () { console.log("quit-ilb2"); });