Buntix/imagelightbox

Image Lightbox, Responsive and Touch‑friendly

imagelightbox

Image Lightbox, Responsive and Touch‑friendly.

This is a fork of the lightbox plugin created by Osvaldas Valutis.

See most of the available options at the Demo Page

Requirements and Browser support

• jQuery 1.12 (earlier version not tested), feel free to use jQuery v2 or v3 if you don't need to support older browsers
• All mayor desktop browsers and versions as well as mobile browsers on Android, iOS and Windows Phone.
• IE8 is NOT supported

How to use

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    $( function()
    {
        $( selector ).imageLightbox();
    });
</script>

Options

The list of options and their default values is:

$( selector ).imageLightbox({                                     
    selector:       'a[data-imagelightbox]', // string;          this is required if navigation is true
    id:             'imagelightbox',         // string;
    allowedTypes:   'png|jpg|jpeg|gif',      // string;          only include selectors matching this regex
    animationSpeed: 250,                     // integer;
    activity:       false,                   // bool;            show activity indicator
    arrows:         false,                   // bool;            show left/right arrows
    button:         false,                   // bool;            show close button
    caption:        false,                   // bool;            show captions
    enableKeyboard: true,                    // bool;            enable keyboard shortcuts (arrows Left/Right and Esc)
    importAttrs:    { 'href': 'src' },       // object           map these attributes from the target to the associated image
    navigation:     false,                   // bool;            show navigation
    overlay:        false,                   // bool;            display the lightbox as an overlay
    preloadNext:    true,                    // bool;            silently preload the next image
    quitOnEnd:      false,                   // bool;            quit after viewing the last image
    quitOnImgClick: false,                   // bool;            quit when the viewed image is clicked
    quitOnDocClick: true,                    // bool;            quit when anything but the viewed image is clicked
    quitOnEscKey:   true,                    // bool;            quit when Esc key is pressed
    onStart:        false,                   // function/bool;   calls function when the lightbox starts
    onEnd:          false,                   // function/bool;   calls function when the lightbox quits
    onLoadStart:    false,                   // function/bool;   calls function when the image load begins
    onLoadEnd:      false                    // function/bool;   calls function when the image finishes loading
});

Starting lightbox with JavaScript call

imageLightBox can be started with startImageLightbox() JavaScript function call.

Example:

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    $( function()
    {
        var gallery = $( selector ).imageLightbox();
        gallery.startImageLightbox();
    });
</script>

Adding images dynamically to lightbox

imageLightBox allows adding more images dynamically at runtime

Example:

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    $( function()
    {
        var gallery = $( selector ).imageLightbox();
        var image = $( '<img />' );
        gallery.addToImageLightbox( image );
    });
</script>  

Passing parameters to lightbox images

importAttrs is a map of attributes to transfer from the target defined by $(selector) to the displayed image By default this maps the href of a link to the lightbox image src. To extend this to provide device optimised images via the HTML5 srcset and sizes attributes you could use the example below.

Example:

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
    $( function()
    {
        var gallery = $( selector ).imageLightbox({
            importAttrs: { href: "src", srcset: "srcset", sizes: "sizes" }
        });
    });
</script>

Changelog

• 0.5.2 Updates to demo page, cleanups
• 0.5.1 Fix startImageLightbox
• 0.5.0 Support jQuery3