Image Galleries

Image gallery components using sparkles-media-gallery.js with lightbox, zoom, and navigation features.

📸 Gallery Demonstrations

Interactive image galleries with lightbox, zoom, and navigation features

Gallery Grid Layouts

Sparkles Media Gallery

Mountain landscape
Ocean waves
Forest path
Desert dunes
City skyline
Flower field

Features included:

  • Lightbox with zoom functionality
  • Keyboard navigation (arrows, ESC)
  • Touch gestures on mobile
  • Thumbnail navigation
  • Image captions

Product Image Gallery

Product main view
View 1
View 2
View 3
Product video

Premium Watch Collection

Experience luxury timekeeping with our exclusive collection. Click on any image to view in full detail with zoom capabilities.

$299.99 $399.99

Masonry Gallery Layout

Tall image Wide image Square image Portrait image Landscape image Medium image

Note: Uses CSS columns for Pinterest-style masonry layout. For interactive lightbox, wrap in SparklesMediaGallery component.

Lazy Loading Images

Lazy loaded image

Add loading="lazy" to images for native lazy loading.

CSS Image Filters

Grayscale

Grayscale

Sepia

Sepia

Blur

Blur

📝 Usage Examples

<div x-data="SparklesMediaGallery()" x-init="init()">
  <div class="group cursor-pointer overflow-hidden rounded-lg"
       data-media-type="image"
       data-image-src="full-size.jpg"
       @click="openMedia(0)">
    <img src="thumbnail.jpg" alt="Description">
  </div>
</div>
<div class="columns-1 md:columns-2 lg:columns-3 gap-4">
  <img src="image1.jpg" class="w-full rounded-lg">
  <img src="image2.jpg" class="w-full rounded-lg">
</div>
<img src="placeholder.jpg" loading="lazy" alt="Lazy image">

⚡ Performance & Accessibility

Gallery Optimization Best Practices

  • 🖼️ Responsive images with srcset for different device resolutions
  • ⚡ Native lazy loading with loading="lazy" for performance
  • ♿ ARIA labels and keyboard navigation for screen readers
  • 📱 Touch gesture support for mobile pinch-to-zoom