Imagelightbox

Image Lightbox, Responsive and Touch‑friendly

Download .zip Download .tar.gz View on GitHub

With activity indication


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="a"]'),
    {
        activity: true,
    },
);

With overlay


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="b"]'),
    {
        overlay: true,
    },
);

With "close" button


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="c"]'),
    {
        button: true,
        quitOnDocClick: false,
    },
);

With caption


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="d"]'),
    {
        caption: true,
    },
);

With navigation


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="e"]'),
    {
        navigation: true,
    },
);

With arrows


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="d"]'),
    {
        caption: true,
    },
);

All of the above


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="g"]'),
    {
        activity: true,
        arrows: true,
        button: true,
        caption: true,
        navigation: true,
        overlay: true,
        quitOnDocClick: false,
    },
);

Quiting on reaching the end or clicking the image


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="quit"]'),
    {
        quitOnEnd: true,
        quitOnImgClick: true,
    },
);

With manual trigger


const manualOpenGallery = new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="h"]'),
    {
        arrows: true,
    },
);
document
    .getElementsByClassName("trigger_lightbox")
    .item(0)
    .addEventListener("click", () => {
        manualOpenGallery.open();
    });

dynamically adding


const dynamicAddingGallery = new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="i"]'),
    {
        arrows: true,
    },
);
document
    .getElementsByClassName("add_image")
    .item(0)
    .addEventListener("click", () => {
        const linkContainer = document
            .getElementsByClassName("demo_dynamic")
            .item(0)!;
        const newLi = document.createElement("li");
        linkContainer.appendChild(newLi);

        const newAnchor = document.createElement("a");
        newAnchor.dataset.imagelightbox = "i";
        newAnchor.href = "images/demo4.jpg";
        newLi.appendChild(newAnchor);

        const newImg = document.createElement("img");
        newImg.src = "images/thumb4.jpg";
        newAnchor.appendChild(newImg);

        dynamicAddingGallery.addImages(
            document.querySelectorAll('a[data-imagelightbox="i"]'),
        );
    });

With history & permalinks


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="j"]'),
    {
        arrows: true,
        history: true,
    },
);

Open 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


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="k"]'),
    {
        arrows: true,
        history: true,
    },
);

Add data-ilb2-id="img2" and open 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


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="fullscreen"]'),
    {
        fullscreen: true,
    },
);

Filter images by extension

Allow gif only


new ImageLightbox(
    document.querySelectorAll('a[data-imagelightbox="allowedtypes"]'),
    {
        allowedTypes: "gif",
    },
);

Events


new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="events"]'));
document.addEventListener("ilb:start", (e) => {
    console.log("ilb:start");
    console.log(e.target);
});
document.addEventListener("ilb:quit", () => {
    console.log("ilb:quit");
});
document.addEventListener("ilb:loaded", () => {
    console.log("ilb:loaded");
});
document.addEventListener("ilb:previous", (e) => {
    console.log("ilb:previous");
    console.log(e.target);
});
document.addEventListener("ilb:next", (e) => {
    console.log("ilb:next");
    console.log(e.target);
});