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
Features included:
- Lightbox with zoom functionality
- Keyboard navigation (arrows, ESC)
- Touch gestures on mobile
- Thumbnail navigation
- Image captions
Product Image Gallery
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
Note: Uses CSS columns for Pinterest-style masonry layout. For interactive lightbox, wrap in SparklesMediaGallery component.
Lazy Loading Images
Add loading="lazy" to images for native lazy loading.
CSS Image Filters
Grayscale
Sepia
Blur
📝 Usage Examples
<div x-data="SparklesMediaGallery()" x-init="init()">
<div class="sparkles-media-item cursor-pointer"
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
(Qty: )