Lightbox

A photo large, full screen, with the rest of the set a key away
Gallery

Arrow keys or the buttons at the edges walk the set; Escape, × or a click on the dark closes it.
Show the code
<div class="thumb-grid w-100" data-lightbox-set="lb-1">
<button type="button" data-dialog="lb-1" data-lightbox="assets/demo/products/butter-croissant.jpg" data-alt="Butter croissant" data-caption="Butter croissant" aria-label="Open Butter croissant large">
<img src="assets/demo/products/butter-croissant.jpg" alt="" width="1200" height="900" loading="lazy">
</button>
<button type="button" data-dialog="lb-1" data-lightbox="assets/demo/products/cappuccino.jpg" data-alt="Cappuccino" data-caption="Cappuccino" aria-label="Open Cappuccino large">
<img src="assets/demo/products/cappuccino.jpg" alt="" width="1200" height="900" loading="lazy">
</button>
<button type="button" data-dialog="lb-1" data-lightbox="assets/demo/products/sourdough-loaf.jpg" data-alt="Sourdough loaf" data-caption="Sourdough loaf" aria-label="Open Sourdough loaf large">
<img src="assets/demo/products/sourdough-loaf.jpg" alt="" width="1200" height="900" loading="lazy">
</button>
<button type="button" data-dialog="lb-1" data-lightbox="assets/demo/products/matcha-latte.jpg" data-alt="Matcha latte" data-caption="Matcha latte" aria-label="Open Matcha latte large">
<img src="assets/demo/products/matcha-latte.jpg" alt="" width="1200" height="900" loading="lazy">
</button>
<button type="button" data-dialog="lb-1" data-lightbox="assets/demo/products/raspberry-tart.jpg" data-alt="Raspberry tart" data-caption="Raspberry tart" aria-label="Open Raspberry tart large">
<img src="assets/demo/products/raspberry-tart.jpg" alt="" width="1200" height="900" loading="lazy">
</button>
<button type="button" data-dialog="lb-1" data-lightbox="assets/demo/products/honey.jpg" data-alt="Wildflower honey" data-caption="Wildflower honey" aria-label="Open Wildflower honey large">
<img src="assets/demo/products/honey.jpg" alt="" width="1200" height="900" loading="lazy">
</button>
</div>