Gallery Component Showcase

Introduction

The Gallery component is a flexible and visually appealing component for displaying images with various layouts and animations. Here are some examples showcasing different configurations.

Usage Examples

Grid Layout with Fade Animation

Photo 1
Photo 2
Photo 3
Photo 4
<Gallery
  items={[
    { id: '1', src: '/images/photo1.jpg', alt: 'Photo 1', width: 600, height: 400 },
    { id: '2', src: '/images/photo2.jpg', alt: 'Photo 2', width: 600, height: 400 },
    { id: '3', src: '/images/photo3.jpg', alt: 'Photo 3', width: 600, height: 400 },
    { id: '4', src: '/images/photo4.jpg', alt: 'Photo 4', width: 600, height: 400 },
  ]}
  layout="grid"
  animation="fade"
/>

Carousel Layout with Scale Animation

Photo 1
Photo 2
Photo 3
Photo 4
<Gallery
  items={[
    { id: '1', src: '/images/photo1.jpg', alt: 'Photo 1', width: 600, height: 400 },
    { id: '2', src: '/images/photo2.jpg', alt: 'Photo 2', width: 600, height: 400 },
    { id: '3', src: '/images/photo3.jpg', alt: 'Photo 3', width: 600, height: 400 },
    { id: '4', src: '/images/photo4.jpg', alt: 'Photo 4', width: 600, height: 400 },
  ]}
  layout="carousel"
  animation="scale"
/>

Custom Styled Gallery with Slide Animation

Photo 1
Photo 2
Photo 3
Photo 4
<Gallery
  items={[
    { id: '1', src: '/images/photo1.jpg', alt: 'Photo 1', width: 600, height: 400 },
    { id: '2', src: '/images/photo2.jpg', alt: 'Photo 2', width: 600, height: 400 },
    { id: '3', src: '/images/photo3.jpg', alt: 'Photo 3', width: 600, height: 400 },
    { id: '4', src: '/images/photo4.jpg', alt: 'Photo 4', width: 600, height: 400 },
  ]}
  layout="grid"
  animation="slide"
  className="bg-gray-800 p-4 rounded-lg"
/>