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 major 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;
    id:             'imagelightbox',         // string;
    allowedTypes:   'png|jpg|jpeg|gif',      // string;          use empty string to allow any file type
    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)
    history:        false,                   // bool;            enable image permalinks and history
    fullscreen:     false,                   // bool;            enable fullscreen (enter/return key)
    gutter:         10,                      // integer;         window height less height of image as a percentage
    offsetY:        0,                       // integer;         vertical offset in terms of gutter
    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
});

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>

Example: Open specific image

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

Adding captions to lightbox

add an "ilb2-caption" data-attribute to the element, fallback value is the alt-attribute of the thumbnail-image

    <a data-imagelightbox="x" data-ilb2-caption="caption text"
        href="image.jpg">
        <img src="thumbnail.jpg" alt="fallback caption"/>
    </a>

Fullscreen

Simply set the fullscreen option to true to enable the option. If the user's browser supports the fullscreen API, they can switch to fullscreen mode by pressing enter.

Video

Video can be displayed in imagelightbox, by including a data-ilb2-video attribute in the link. This attribute should contain a JSON-encoded list of parameters as they would be in an HTML5 video tag. For multiple video sources, the sources field can be added, containing a list of similarily encoded HTML5 source tags.

    <a data-ilb2-video='{"controls":"controls", "autoplay":"autoplay", "sources":[{"src":"images/video.m4v", "type":"video/mp4"}], "width": 1920, "height": 1080}' data-imagelightbox="x">
	    <img src="images/video-thumb.jpg">
    </a>

Hooks

Image Lightbox now triggers unique events upon start, finish, and when either the next or previous image is requested. These events are, respectively, "start.ilb2", "quit.ilb2", "loaded.ilb2", "next.ilb2", and "previous.ilb2".

Usage example:

 $(document)
    .on("start.ilb2", function (_, e) {
    console.log("Image Lightbox has started on element: ");
    console.log(e);
    })
    .on("next.ilb2", function (_, e) {
    console.log("Next image: ");
    console.log(e);
    })
    .on("previous.ilb2", function (_, e) {
    console.log("Previous image: ");
    console.log(e);
    })
    .on("quit.ilb2", function () {
    console.log("Image Lightbox has quit.");
    });

Using multiple sets

As of commit bf2b4db, imageLightbox supports "sets." A set is defined by the links with a common value for the "data-imagelightbox" attribute.

For example:

    <a data-imagelightbox="a"
        href="image_1.jpg">
        <img src="thumbnail_1.jpg" alt="caption"/>
    </a>
    <a data-imagelightbox="a"
        href="image_2.jpg">
        <img src="thumbnail_2.jpg" alt="caption"/>
    </a>

    <a data-imagelightbox="b"
        href="image_3.jpg">
        <img src="thumbnail_3.jpg" alt="caption"/>
    </a>
    <a data-imagelightbox="b"
        href="image_4.jpg">
        <img src="thumbnail_4.jpg" alt="caption"/>
    </a>

When the user clicks any of the thumbnails with a data-imagelightbox value of "a", only those images will appear in the lightbox. The same is true when clicking an image with data-imagelightbox value of "b" and any other.

If you want unlimited gallerys call this snippet (for example: https://jsfiddle.net/7ow26fcg/):

(Используйте этот код вызова lightbox, если у вас на странице несколько галерей, где у каждой галереи уникальное значение атрибута data-imagelightbox. Например data-imagelightbox="gallery_1", data-imagelightbox="gallery_2" и т.д.)

<script>
    var attrs = {};
    var classes = $("a[data-imagelightbox]").map(function(indx, element){
      var key = $(element).attr("data-imagelightbox");
      attrs[key] = true;
      return attrs;
    });
    var attrsName = Object.keys(attrs);

    attrsName.forEach(function(entry) {
        $( "[data-imagelightbox='"+entry+"']" ).imageLightbox({
            overlay: true
        });
    });
</script>

In order to "capture" all possible sets on a give webpage, it is necessary to apply imageLightbox to "a[data-imagelightbox]"; that is, without specifying a particular data-imagelightbox attribute value.

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>

Permalinks & History

When history is enabled, upon clicking on an image, the query field imageLightboxIndex=X is added to the URL, where X is the index of the currently opened image. This means that such an URL can be copied and used as a permanent link to that particular image. When somebody opens the URL, the lightbox will be open on the image in question. This also works with multiple sets, where an aditional query field imageLightboxSet=Y is used to distinguish between the sets in one page.

In some cases, this could lead to a different image being opened, for example if new images have been added to the set, or if the order of the images has changed. To solve this issue, whenever the HTML attribute data-ilb2-id=X is present in the image tag, this value is used instead of the image index (this means this id has to be different for each image and mustn't change over time).

Example:

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>

<a href="image1.jpg" data-imagelightbox="images" data-ilb2-id="img1"><img src="thumb1.jpg"></a>
<a href="image2.jpg" data-imagelightbox="images" data-ilb2-id="img2"><img src="thumb2.jpg"></a>
<a href="image3.jpg" data-imagelightbox="images" data-ilb2-id="img3"><img src="thumb3.jpg"></a>

<script>
    $( function()
    {
        $('a[data-imagelightbox="images"]').imageLightbox({
            history: true
        });
    });
</script>

If you want a dynamically added image to be opened after the page load, you have to call gallery.openHistory() on the ImageLightbox object yourself after adding the image.

Changelog

You can find all notable changes to this project in the CHANGELOG.md.

See also

Used by https://wordpress.org/plugins/skaut-google-drive-gallery/