Stlightbox NPM

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:

Include the CSS in your h:

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

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

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>

Initialize Stlightbox in your JavaScript code:

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

lightbox.initialize();

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