Skip to main content

Lightbox

Tobii is an accessible and open-source lightbox.

Add a thumbnail image with the class name lightbox and link it to a larger image.

And group a set of related images adding the data-group attribute.

<div class="row g-2 g-md-3">
  <div class="col">
    <a href="../assets/img/autumn-1.jpg" class="lightbox" data-group="autumn">
      <img src="../assets/img/autumn-1-th.jpg" class="img-fluid" alt="White and brown house near a body of water during daytime" width="420" height="278">
    </a>
  </div>
  <div class="col">
    <a href="../assets/img/autumn-2.jpg" class="lightbox" data-group="autumn">
      <img src="../assets/img/autumn-2-th.jpg" class="img-fluid" alt="Sun rays filter through the trees of a forest in autumn." width="420" height="278">
    </a>
  </div>
</div>

View Tobii on GitHub