Lightbox

Focus uses Tobii, an accessible and open-source lightbox.

To use it, add a thumbnail image with the class lightbox and link it to a larger version.

To group related images, use the data-group attribute.

<div class="row">
  <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 launch