Imagelightbox

Image Lightbox, Responsive and Touch‑friendly

Download .zip Download .tar.gz View on GitHub

Basic example


new ImageLightbox(document.querySelectorAll('a[data-imagelightbox="basic"]'));

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.

Minimal example


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

With caption


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

With navigation


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

Quit behavior


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

With history & permalinks


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

Open with ?imageLightboxIndex=2 added to the url to open the third image (may need to add &imageLightboxSet=history as well because there are multiple examples)

History with ids


new ImageLightbox(
  document.querySelectorAll('a[data-imagelightbox="history-ids"]'),
  {
    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=history-ids as well because there are multiple examples)

Filter images by extension

Allow gif only


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

With manual trigger


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

Dynamically adding images


const dynamicAddingGallery = new ImageLightbox(
  document.querySelectorAll('a[data-imagelightbox="dynamic"]'),
);
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"] = "dynamic";
    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="dynamic"]'),
    );
  });

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);
});