Awesome-lightbox NPM

Awesome Lightbox

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';

2. Initialize the Lightbox

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.

lightbox image-gallery responsive UI image-viewer zoom slideshow

1.0.0

7 months ago