Stlightbox - JavaScript Lightbox Plugin

Stlightbox is a lightweight and customizable JavaScript lightbox plugin that allows you to display images and videos in a beautiful overlay with various configuration options.

Features

• Display images and videos in a responsive lightbox.
• Customizable appearance and behavior.
• Keyboard navigation for easy gallery navigation.
• Download button for image downloads.
• Pagination support to show the current image position.
• Dark and light themes with automatic theme detection.

Installation

You can install Stlightbox by including the JavaScript and CSS files in your project. You can download the latest release from the GitHub repository or use a package manager like npm or yarn:

npm install stlightbox

Usage

To use Stlightbox in your project, follow these simple steps:

1. Include the CSS in your h:

<link rel="stylesheet" href="path/to/stlightbox.css" />

<script src="path/to/stlightbox.js"></script>

2. Wrap your image or video i tag with the same href. Add the data-stlightbox attribute to the tag you want to include in the lightbox:

<!-- FIRST GALLERY -->
<a href="image1.jpg" data-stlightbox="stellar-solutions">
    <img src="image1.jpg" alt="Image 1" />
</a>
<a href="image2.jpg" data-stlightbox="stellar-solutions">
    <img src="image2.jpg" alt="Image 2" />
</a>

<!-- SECOND GALLERY -->
<a href="image3.jpg" data-stlightbox="stl-gallery">
    <img src="image3.jpg" alt="Image 3" />
</a>
<a href="image4.jpg" data-stlightbox="stl-gallery">
    <img src="image4.jpg" alt="Image 4" />
</a>

3. Initialize Stlightbox in your JavaScript code:

const lightbox = new Stlightbox({
    // Configuration options (see below)
});

lightbox.initialize();

4. Customize the appearance and behavior of the lightbox by providing configuration options (see the Configuration section below).

Configuration

You can customize the behavior and appearance of Stlightbox by passing configuration options when initializing it. Here are the available options:

| Option | Description | Default Value | | -------------------- | ------------------------------------------------- | -------------------------- | | lightThemeBackground | Background color for the light theme | 'rgba(255, 255, 255, 0.5)' | | darkThemeBackground | Background color for the dark theme | 'rgba(100, 100, 100, 0.5)' | | showDownloadButton | Show a download button for images | false | | keyboardControls | Enable keyboard navigation | true | | videoAutoplay | Autoplay videos in the lightbox | false | | pagination | Enable pagination | false | | paginationSeparator | Separator between current and total in pagination | 'of' | | loop | Enable loop navigation | false |

License

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

Acknowledgments

Icons used in the lightbox are provided by Heroicons.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.