Lightbox

Add responsive image galleries with Bigger Picture lightbox.

Overview

The Bigger Picture lightbox library allows you to create fast, lightweight, and responsive image galleries with zoom and navigation features. It supports keyboard navigation, mobile gestures, captions, and thumbnails.

You can include this library in your project using CDN links.

<link href="https://cdn.jsdelivr.net/npm/bigger-picture@1.1.19/dist/bigger-picture.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/bigger-picture@1.1.19/dist/bigger-picture.min.js"></script>

These lines include the required CSS and JavaScript to enable the lightbox functionality.

Basic Example

The example below demonstrates a simple image gallery using the Bigger Picture lightbox. When a user clicks any thumbnail, the lightbox opens starting from that image, and allows browsing through the entire set. 

<div id="images" class="row g-2">
  <div class="col-sm-4">
      <a
          href="https://picsum.photos/id/432/1200/900"
          data-img="https://picsum.photos/id/432/1200/900"
          data-thumb="https://picsum.photos/id/432/150/150"
          data-alt="Sunset"
          data-caption="Sunset casting golden light over forested mountain hills."
      >
          <img src="https://picsum.photos/id/432/300/300" class="rounded w-100" alt="Thumbnail of Image 1">
      </a>
  </div>
  <div class="col-sm-4">
      <a
          href="https://picsum.photos/id/16/1200/900"
          data-img="https://picsum.photos/id/16/1200/900"
          data-thumb="https://picsum.photos/id/16/150/150"
          data-alt="Lake"
          data-caption="A tranquil lake reflecting misty mountain peaks in the distance."
      >
          <img src="https://picsum.photos/id/16/300/300" class="rounded w-100" alt="Thumbnail of Image 2">
      </a>
  </div>
  <div class="col-sm-4">
      <a
          href="https://picsum.photos/id/436/1200/900"
          data-img="https://picsum.photos/id/436/1200/900"
          data-thumb="https://picsum.photos/id/436/150/150"
          data-alt="Bridge"
          data-caption="San Francisco’s iconic Golden Gate Bridge stretching across the bay."
      >
          <img src="https://picsum.photos/id/436/300/300" class="rounded w-100" alt="Thumbnail of Image 3">
      </a>
  </div>
</div>
document.addEventListener('DOMContentLoaded', function () {
  // Initialize
  let bp = BiggerPicture({
      target: document.body, // The lightbox will be added to the document body
  });

  // Select the gallery elements
  let imageLinks = document.querySelectorAll('#images a');

  // Define the click handler function
  function openGallery(e) {
      e.preventDefault(); // Stop the link from navigating away

      // Open the lightbox
      bp.open({
          items: imageLinks,    // All links in the collection
          el: e.currentTarget,  // Start with the specific link that was clicked
      });
  }

  // Attach the event listener to each link
  for (let link of imageLinks) {
      link.addEventListener("click", openGallery);
  }

});

Custom Layout Example

This example shows a custom grid layout using rows and columns, showcasing 7 images in a responsive pattern. 

<div id="customLayout" class="row g-2">
  <!-- Large image on the left -->
  <div class="col-12 col-md-6">
    <a
      href="https://picsum.photos/id/432/1200/800"
      data-img="https://picsum.photos/id/432/1200/800"
      data-alt="Sunset"
      data-caption="Sunset casting golden light over forested mountain hills."
    >
      <img src="https://picsum.photos/id/432/800/600" class="img-fluid rounded w-100" alt="Mountain Lake">
    </a>
  </div>

  <!-- Two stacked smaller images on the right -->
  <div class="col-12 col-md-3 d-flex flex-column gap-2">
    <a
      href="https://picsum.photos/id/16/1200/800"
      data-img="https://picsum.photos/id/16/1200/800"
      data-alt="Lake"
      data-caption="A tranquil lake reflecting misty mountain peaks in the distance."
    >
      <img src="https://picsum.photos/id/16/400/295" class="img-fluid rounded w-100" alt="Dog Portrait">
    </a>

    <a
      href="https://picsum.photos/id/436/1200/800"
      data-img="https://picsum.photos/id/436/1200/800"
      data-alt="Bridge"
      data-caption="San Francisco’s iconic Golden Gate Bridge stretching across the bay."
    >
      <img src="https://picsum.photos/id/436/400/295" class="img-fluid rounded w-100" alt="Ocean Cliffs">
    </a>
  </div>

  <!-- Another tall image on the right -->
  <div class="col-12 col-md-3">
    <a
      href="https://picsum.photos/id/439/1200/800"
      data-img="https://picsum.photos/id/439/1200/800"
      data-alt="Skyline"
      data-caption="A city skyline silhouetted against the colors of dusk."
    >
      <img src="https://picsum.photos/id/439/400/600" class="img-fluid rounded w-100" alt="Forest Path">
    </a>
  </div>

  <!-- Three evenly sized images below -->
  <div class="col-12 col-md-4">
    <a
      href="https://picsum.photos/id/451/1200/800"
      data-img="https://picsum.photos/id/451/1200/800"
      data-alt="Signboard"
      data-caption="A retro-style motel sign basking in broad daylight."
    >
      <img src="https://picsum.photos/id/451/400/300" class="img-fluid rounded w-100" alt="Desert Road">
    </a>
  </div>

  <div class="col-12 col-md-4">
    <a
      href="https://picsum.photos/id/448/1200/800"
      data-img="https://picsum.photos/id/448/1200/800"
      data-alt="Aerial Shot"
      data-caption="Aerial view of a bustling urban landscape."
    >
      <img src="https://picsum.photos/id/448/400/300" class="img-fluid rounded w-100" alt="Snowy Mountains">
    </a>
  </div>

  <div class="col-12 col-md-4">
    <a
      href="https://picsum.photos/id/440/1200/800"
      data-img="https://picsum.photos/id/440/1200/800"
      data-alt="Rocky Terrain"
      data-caption="Jagged coastal rocks lining the edge of the ocean."
    >
      <img src="https://picsum.photos/id/440/400/300" class="img-fluid rounded w-100" alt="City Skyline">
    </a>
  </div>

</div>

document.addEventListener('DOMContentLoaded', function () {
  // Initialize
  let bp = BiggerPicture({
      target: document.body, // The lightbox will be added to the document body
  });

  // Select the gallery elements
  let imageLinks = document.querySelectorAll('#customLayout a');

  // Define the click handler function
  function openGallery(e) {
      e.preventDefault(); // Stop the link from navigating away

      // Open the lightbox
      bp.open({
          items: imageLinks,    // All links in the collection
          el: e.currentTarget,  // Start with the specific link that was clicked
      });
  }

  // Attach the event listener to each link
  for (let link of imageLinks) {
      link.addEventListener("click", openGallery);
  }

});

Video, Audio and Iframes

BiggerPicture supports rich media types beyond just images. You can embed and open MP4 videos, audio tracks, and even iframes inside the lightbox. 

<div id="media-iframes" class="row g-2">
  <!-- Video -->
  <div class="col-sm-4 position-relative">
    <a
      href="https://cdn.pixabay.com/video/2022/06/30/122597-725894500_medium.mp4"
      data-width="1920"
      data-height="1080"
      data-sources='[{"src": "https://cdn.pixabay.com/video/2022/06/30/122597-725894500_medium.mp4", "type": "video/mp4"}]'
      data-thumb="https://picsum.photos/id/106/400/300"
      class="d-block position-relative"
      >
      <img
        src="https://picsum.photos/id/106/400/300"
        class="rounded w-100"
        alt="Flowers"
      />
      <i class="ri-play-circle-line position-absolute top-50 start-50 translate-middle text-light fs-1"></i>
    </a>
  </div>

  <!-- Audio -->
  <div class="col-sm-4 position-relative">
    <a
      href="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
      data-type="audio"
      data-sources='[{"src": "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", "type": "audio/mp3"}]'
      data-thumb="https://picsum.photos/id/1016/800/600"
      class="d-block position-relative"
    >
      <img
        src="https://picsum.photos/id/1016/800/600"
        class="rounded w-100"
        alt="Audio track thumbnail"
      />
      <i class="ri-sound-module-line position-absolute top-50 start-50 translate-middle text-light fs-1"></i>
    </a>
  </div>

  <!-- Iframe -->
  <div class="col-sm-4 position-relative">
    <a
      href="https://www.wikipedia.org"
      data-iframe="https://www.wikipedia.org"
      data-width="1200"
      data-height="800"
      data-thumb="https://picsum.photos/id/1040/800/600"
      class="d-block position-relative"
    >
      <img
        src="https://picsum.photos/id/1040/800/600"
        class="rounded w-100"
        alt="Iframe thumbnail"
      />
      <i class="ri-window-line position-absolute top-50 start-50 translate-middle text-light fs-1"></i>
    </a>
  </div>

</div>

document.addEventListener('DOMContentLoaded', function () {
  // Initialize
  let bp = BiggerPicture({
      target: document.body, // The lightbox will be added to the document body
  });

  // Select the elements
  let links = document.querySelectorAll('#media-iframes a');

  // Define the click handler function
  function openLightbox(e) {
      e.preventDefault(); // Stop the link from navigating away

      // Open the lightbox
      bp.open({
          items: links,    // All links in the collection
          el: e.currentTarget,  // Start with the specific link that was clicked
      });
  }

  // Attach the event listener to each link
  for (let link of links) {
      link.addEventListener("click", openLightbox);
  }

});

Embedded YouTube Video Example

This example shows how to open a YouTube video inside the lightbox when clicking a thumbnail image. 

<div id="videoGallery" class="row g-2 p-3">
<div class="col-sm-6">
  <a href="https://www.youtube.com/watch?v=es4x5R-rV9s" class="yt" data-width="1280" data-height="720" data-thumb="https://img.youtube.com/vi/es4x5R-rV9s/hqdefault.jpg" data-iframe="https://www.youtube.com/embed/es4x5R-rV9s?si=qGi_xLEOfJMxsjLM?autoplay=1&playsinline=1" >
    <img src="https://img.youtube.com/vi/es4x5R-rV9s/hqdefault.jpg" class="rounded w-100" alt="YouTube Video Thumbnail">
  </a>
</div>
</div>

document.addEventListener('DOMContentLoaded',
function () {
let bp = BiggerPicture({ target: document.body, });
let videoLinks = document.querySelectorAll('#videoGallery a');

function openVideo(e) {
e.preventDefault();
bp.open({
items: videoLinks,
el: e.currentTarget,
});
}

for (let link of videoLinks) {
link.addEventListener("click", openVideo);
}
});

HTML Modal

This example demonstrates how to open a custom HTML modal using Bigger Picture. You can use this technique to display dialogs, confirmations, forms, or any other rich content inside the lightbox. 

<div id="html-modal" class="row g-2">
  <div class="col-sm-4">
      <button id="dialogButton" class="btn btn-primary">Open Dialog</button>
  </div>
</div>
document.addEventListener('DOMContentLoaded', function () {
  let button = document.querySelector("#dialogButton");

  // Initialize
  let bp = BiggerPicture({
      target: document.body, // The lightbox will be added to the document body
  });

  button.addEventListener("click", (e) => {
    bp.open({
      intro: "fadeup",
      items: [
        {
          html: `
            <div class="card text-center p-4">
              <i class="ri-compass-line fs-1 mb-2"></i>
              <h3 class="mb-3">Use location services?</h3>
              <p class="text-muted mb-4">Kindly enable location services so we can provide you with accurate directions.</p>
              <div class="d-flex justify-content-center gap-2">
                <button class="btn btn-outline-secondary">Later</button>
                <button class="btn btn-primary">Confirm</button>
              </div>
            </div>
          `
        }
      ],

    });
  });

});

An inline gallery is displayed within a specific HTML element on the page, instead of as a full-screen overlay. It often works best when defined using a JavaScript object array, and you must pass the inline: true option. 

<div id="inline-gallery-container" class="z-3" style="position: relative; height: 480px;"></div>
document.addEventListener('DOMContentLoaded', function () {
  // Define the image data as a JS array
  let inlineItems = [
      {
          img: "https://picsum.photos/id/16/960/600",
          thumb: "https://picsum.photos/id/16/150/150",
          alt: "Inline Image 1: Lake",
          caption: "A tranquil lake reflecting misty mountain peaks.",
          height: 600,
          width: 960
      },
      {
          img: "https://picsum.photos/id/436/960/600",
          thumb: "https://picsum.photos/id/436/150/150",
          alt: "Inline Image 2: Bridge",
          caption: "Iconic Golden Gate Bridge stretching across the bay.",
          height: 600,
          width: 960
      }
  ];

  // Get the target container element
  let inlineTarget = document.getElementById("inline-gallery-container");

  // Initialize
  let bp = BiggerPicture({
      target: inlineTarget,
  });

  // Open the gallery immediately with the 'inline' option
  bp.open({
      items: inlineItems,
      inline: true,      // Tells Bigger Picture to stay within the target element
      scale: 1,          // Makes the content fill the container more completely
      noClose: true,     // Typically, you hide the close button for inline galleries
      intro: "fadeup"    // A nice animation for inline
  });

});

Responsive Images

Use srcset to automatically load the most appropriate image size based on the display size. 

<div id="responsive-images" class="row">
  <div class="col-lg-8 offset-lg-2">
      <a
          href="https://picsum.photos/id/162/1200/900"
          data-img="https://picsum.photos/id/162/600/450 600w, https://picsum.photos/id/162/1200/900 1200w, https://picsum.photos/id/162/1800/1350 1800w"
          data-thumb="https://picsum.photos/id/162/300/225"
          data-height="3376"
          data-width="6000"
          data-alt="Aerial View"
      >
          <img src="https://picsum.photos/id/162/600/450" class="rounded w-100" alt="Thumbnail of Image 1">
      </a>
  </div>
</div>
document.addEventListener('DOMContentLoaded', function () {
  // Initialize
  let bp = BiggerPicture({
      target: document.body, // The lightbox will be added to the document body
  });

  // Select the gallery elements
  let imageLinks = document.querySelectorAll('#responsive-images a');

  // Define the click handler function
  function openGallery(e) {
      e.preventDefault(); // Stop the link from navigating away

      // Open the lightbox
      bp.open({
          items: imageLinks,    // All links in the collection
          el: e.currentTarget,  // Start with the specific link that was clicked
      });
  }

  // Attach the event listener to each link
  for (let link of imageLinks) {
      link.addEventListener("click", openGallery);
  }

});

Captions

Basic captions are included by default, and can also be customized with CSS.

<div id="images-with-captions" class="row g-2">
  <div class="col-sm-4">
      <a
          href="https://picsum.photos/id/350/1200/900"
          data-img="https://picsum.photos/id/350/1200/900"
          data-thumb="https://picsum.photos/id/350/150/150"
          data-alt="Beach"
          data-caption="A landscape photograph of a beach on a cloudy day."
      >
          <img src="https://picsum.photos/id/350/300/300" class="rounded w-100" alt="Thumbnail of Image 1">
      </a>
  </div>
  <div class="col-sm-4">
      <a
          href="https://picsum.photos/id/352/1200/900"
          data-img="https://picsum.photos/id/352/1200/900"
          data-thumb="https://picsum.photos/id/352/150/150"
          data-alt="Road"
          data-caption="A long exposure image of a busy road."
      >
          <img src="https://picsum.photos/id/352/300/300" class="rounded w-100" alt="Thumbnail of Image 2">
      </a>
  </div>
  <div class="col-sm-4">
      <a
          href="https://picsum.photos/id/366/1200/900"
          data-img="https://picsum.photos/id/366/1200/900"
          data-thumb="https://picsum.photos/id/366/150/150"
          data-alt="Keyboard"
          data-caption="A black and white photo of a keyboard and mouse, with a cup in the background."
      >
          <img src="https://picsum.photos/id/366/300/300" class="rounded w-100" alt="Thumbnail of Image 3">
      </a>
  </div>
</div>
document.addEventListener('DOMContentLoaded', function () {
  // Initialize
  let bp = BiggerPicture({
      target: document.body, // The lightbox will be added to the document body
  });

  // Select the gallery elements
  let imageLinks = document.querySelectorAll('#images-with-captions a');

  // Define the click handler function
  function openGallery(e) {
      e.preventDefault(); // Stop the link from navigating away

      // Open the lightbox
      bp.open({
          items: imageLinks,    // All links in the collection
          el: e.currentTarget,  // Start with the specific link that was clicked
      });
  }

  // Attach the event listener to each link
  for (let link of imageLinks) {
      link.addEventListener("click", openGallery);
  }

});
On this page
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation