Skip to content

Gallery & Lightbox

Scroll-snap carousel

Swipe or scroll horizontally. Snaps to each item.

Photo 1
Mountain sunrise
Photo 2
Forest path
Photo 3
Desert dunes
×
Photo 1 full
Mountain sunrise — full resolution
×
Photo 2 full
Forest path — full resolution
<div class="fap-gallery">
  <figure>
    <a href="#lightbox-1">
      <img src="photo.jpg" alt="Photo 1">
    </a>
    <figcaption>Caption</figcaption>
  </figure>
  <figure>…</figure>
</div>

<!-- Lightbox -->
<div class="fap-lightbox" id="lightbox-1">
  <a href="#" class="fap-lightbox-close" aria-label="Close">&times;</a>
  <figure>
    <img src="photo-full.jpg" alt="Full size">
    <figcaption>Caption</figcaption>
  </figure>
</div>

Thumbnail grid

Thumb 1
Thumb 2
Thumb 3
Thumb 4
<div class="fap-gallery" data-grid>
  <figure><img src="thumb1.jpg" alt="Thumb 1"></figure>
  <figure><img src="thumb2.jpg" alt="Thumb 2"></figure>
  <figure><img src="thumb3.jpg" alt="Thumb 3"></figure>
</div>

Masonry gallery

Masonry 1
Masonry 2
Masonry 3
<div class="fap-gallery" data-masonry>
  <figure><img src="photo1.jpg" alt="Masonry 1"></figure>
  <figure><img src="photo2.jpg" alt="Masonry 2"></figure>
  <figure><img src="photo3.jpg" alt="Masonry 3"></figure>
</div>