JSPM – lightbox-fancy@1.0.0

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (lightbox-fancy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Import the package in your JavaScript:

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

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>

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.

lightbox-fancy