📷 Responsive Lightbox Gallery Demo

Built with PhotoSwipe v5 + Dynamic HTML Captions

Mountain Landscape

This is the preview caption. Learn more.

✨ Features Implemented

✅ Responsive image gallery using <figure> and CSS Grid
✅ Overlaid captions with gradient background
✅ Lightbox powered by PhotoSwipe v5
✅ Dynamic HTML captions inside lightbox using <template> elements
✅ Multi-line ellipsis for thumbnail caption text
✅ Fully accessible links inside captions

✅ Your Gallery Thumbnail (<figure>) Uses native <figcaption> to show a summary/teaser before opening the lightbox. Includes a title and preview text, just like a real-world photo gallery or article card. Responsive image with img tag, wrapped in <a> with proper data attributes for PhotoSwipe.
✅ Your Lightbox Caption (<template>) Separate <template> holds the rich caption shown in the lightbox. You’re using data-pswp-caption-id="#caption-1" on the <a> to bind that template. Caption includes full HTML: emojis ✅, links 🔗, and <h3>, <p> structure. Injected cleanly via PhotoSwipeDynamicCaption plugin using captionContent().

✅ Total Benefits:
Feature Outcome
🖼️ Thumbnail figcaption Shows brief text over/under the thumbnail
🔍 Lightbox template Displays full caption when lightbox opens
🔗 HTML support Use links, bold text, emojis, etc.
💡 CSS custom styling Captions are beautiful, readable, and responsive
🧩 Plugin-based Less custom JS, more maintainable

<section class="gallery">
  <figure>
    <a href="https://picsum.photos/id/1015/1200/900"
       data-pswp-width="1200"
       data-pswp-height="900"
       data-pswp-caption-id="#caption-1">
      <img src="https://picsum.photos/id/1015/300/225" alt="Mountain Landscape" />
    </a>
    <figcaption>
      <h3>Mountain Landscape</h3>
      <p>This is the preview caption. <a href="https://example.com">Learn more</a>.</p>
    </figcaption>
  </figure>

  <template id="caption-1">
    <div class="pswp-caption-content">
      <h3>🌄 Mountain Landscape</h3>
      <p>This is the full lightbox caption, with <a href="https://example.com" target="_blank">clickable links</a> and custom HTML.</p>
    </div>
  </template>
</section>