Image Gallery
A practical Svelte example: Build an image gallery with lightbox and smooth transitions
What You'll Learn
- Working with Svelte transitions
- Implementing modal/lightbox
- Responsive grid layouts
- Image lazy loading
- Keyboard navigation
Project Structure
image-gallery/ ├── src/ │ ├── lib/ │ │ ├── Gallery.svelte │ │ ├── ImageCard.svelte │ │ ├── Lightbox.svelte │ │ ├── ImageLoader.svelte │ │ └── Controls.svelte │ ├── stores/ │ │ └── gallery.js │ ├── utils/ │ │ └── imageUtils.js │ └── App.svelte ├── public/ │ ├── images/ │ └── index.html └── package.json
Key Features
- Responsive masonry layout
- Image lightbox with zoom
- Smooth transitions
- Keyboard navigation
- Touch gestures support
- Image lazy loading
- Filter by categories