JSPM – awesome-lightbox@1.0.0

Package Exports

awesome-lightbox
awesome-lightbox/dist/bundle.js

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 (awesome-lightbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Awesome Lightbox is a responsive and feature-rich JavaScript library for displaying images with a beautiful and modern user interface. It comes with advanced functionality like zooming, slideshows, customizable themes, and more.

Features

Responsive design
Light and dark themes
Smooth animations and transitions
Thumbnail navigation
Zoom support
Slideshow mode
Fullscreen support
Keyboard navigation
Localization support

Installation

Install the package using npm:

npm install awesome-lightbox

Usage

1. Import the Library

Import the CSS and JavaScript into your project:

import AwesomeLightbox from 'awesome-lightbox';
import 'awesome-lightbox/dist/lightbox.css';

const lightbox = new AwesomeLightbox({
  theme: 'dark', // Options: 'dark', 'light'
  autoPlay: true,
  autoPlayInterval: 5000
});

3. Display Images

Pass an array of images to the show method:

const images = [
  { src: 'image1.jpg', caption: 'Beautiful Scene 1' },
  { src: 'image2.jpg', caption: 'Beautiful Scene 2' },
  { src: 'image3.jpg', caption: 'Beautiful Scene 3' }
];

lightbox.show(images, 0); // Start with the first image

Options

Customize the lightbox with these options:

Option	Type	Default	Description
`theme`	String	`'dark'`	Theme of the lightbox. Options: `'dark'`, `'light'`.
`autoPlay`	Boolean	`false`	Enable/disable slideshow autoplay.
`autoPlayInterval`	Number	`3000`	Time interval for autoplay (in milliseconds).
`i18n`	Object	`{}`	Localization for buttons and captions.
`onOpen`	Function	`() => {}`	Callback for when the lightbox opens.
`onClose`	Function	`() => {}`	Callback for when the lightbox closes.
`onImageChange`	Function	`() => {}`	Callback for when the active image changes.

Development

Run the demo locally:

npm start

Build for production:

npm run build

License

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

Contributing

Feel free to submit issues and pull requests on https://github.com/saikothasan/awesome-lightbox.

Demo

A live demo is available at Awesome Lightbox Demo.

awesome-lightbox