GLightbox

glightbox is a modern, lightweight JavaScript library for creating responsive and interactive lightboxes for images, videos, and galleries. This section covers the steps required to include glightbox in your project:

Install from Yarn

To install glightbox, run the following command in the root directory of your project:

yarn add glightbox --save

To use glightbox in your project, you need to include its stylesheet and JavaScript files in your Laravel:

<link rel="stylesheet" href="assets/libs/glightbox/glightbox.css"><link/>

<script src="assets/libs/glightbox/js/glightbox.min.js"><script/>

Below is an example of the HTML code to create a gallery using glightbox. Each image is wrapped in an anchor `` tag, which triggers the lightbox when clicked:



    
        <a href="assets/images/gallery/image-1.jpg" class="lightbox">
            <img src="assets/images/gallery/image-1.jpg" class="img-fluid rounded-2" alt="gallery image">
        </a>
    
    
        <a href="assets/images/gallery/image-2.jpg" class="lightbox">
            <img src="assets/images/gallery/image-2.jpg" class="img-fluid rounded-2" alt="gallery image">
        </a>

Here is the JavaScript code that initializes the glightbox instance. This will enable the lightbox functionality for all elements with the class `.lightbox`:

let glightboxElement = document.getElementsByClassName('lightbox')[0];
if (glightboxElement) {
    var lightbox = GLightbox({
        selector: '.lightbox',
        title: false, // Optional: Set to true if you want to display image titles in the lightbox
    });
}

The above JavaScript code does the following:

Selects the first element with the class `.lightbox` and initializes the `GLightbox` object.
The `selector` option defines which elements will trigger the lightbox (in this case, elements with the `.lightbox` class).
The `title` option is set to `false`, meaning image titles will not be shown in the lightbox. You can set it to `true` if you want to display the image's title.

glightbox

Install from Yarn

Receive the latest updates directly in your inbox!

A Custom Project?

More for Herozi

Herozi Admin & Dashboard Template

160+

6+

60+