Lightbox Fancy

A lightweight, customizable lightbox/fancybox implementation with thumbnails and zoom functionality. Built with vanilla JavaScript and CSS, no dependencies required.

Features

• 🖼️ Responsive image gallery with lightbox effect
• 🔍 Click-to-zoom functionality with pan support
• 👆 Touch swipe support for mobile devices
• ⌨️ Keyboard navigation (arrow keys and ESC)
• 🎯 Thumbnail strip for quick navigation
• 🎨 Smooth animations and transitions
• 📱 Fully responsive design
• ⚡ No dependencies

Installation

npm install lightbox-fancy

Usage

1. Import the package in your JavaScript:

import LightboxFancy from 'lightbox-fancy';
import 'lightbox-fancy/dist/lightbox-fancy.css';

2. Add the lightbox trigger class to your images:

<div class="gallery">
    <img src="thumbnail1.jpg" 
         alt="Image Caption" 
         class="lightbox-trigger" 
         data-lightbox-src="full-size1.jpg">
    <img src="thumbnail2.jpg" 
         alt="Another Caption" 
         class="lightbox-trigger" 
         data-lightbox-src="full-size2.jpg">
</div>

3. Initialize the lightbox:

document.addEventListener('DOMContentLoaded', () => {
    const myLightbox = new LightboxFancy();
});

Customization

You can customize the lightbox by passing options when initializing:

const myLightbox = new LightboxFancy({
    selector: '.custom-trigger', // Custom selector for trigger elements
    srcAttribute: 'data-custom-src', // Custom attribute for full-size image source
    captionAttribute: 'data-caption', // Custom attribute for caption text
    enableKeyboard: true, // Enable/disable keyboard navigation
    enableSwipe: true, // Enable/disable swipe support
    animationSpeed: 500, // Animation speed in milliseconds
    showThumbnails: true // Enable/disable thumbnail strip
});

API Reference

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | selector | string | '.lightbox-trigger' | CSS selector for trigger elements | | srcAttribute | string | 'data-lightbox-src' | Attribute for full-size image URL | | captionAttribute | string | 'alt' | Attribute for image caption | | enableKeyboard | boolean | true | Enable keyboard navigation | | enableSwipe | boolean | true | Enable touch swipe support | | animationSpeed | number | 300 | Animation duration in milliseconds | | showThumbnails | boolean | true | Show thumbnail strip |

Methods

• open(trigger): Open the lightbox with the specified trigger element
• close(): Close the lightbox
• navigate(direction): Navigate to the next/previous image ('prev' or 'next')
• toggleMagnification(): Toggle image zoom

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.