lightgallery doesn't work

[nestle49]

Description

lightgallery doesn't work

Steps to reproduce

1. Download repo
2. include functions.php of wordpress

   wp_enqueue_style( 'lightgallery-css', get_template_directory_uri() . '/assets/lightgallery/css/lightgallery.css', array(), _S_VERSION, true );
       wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/assets/lightgallery/lightgallery.min.js', array(), _S_VERSION, true );
       wp_enqueue_script( 'lightgallery-thumbnail-js', get_template_directory_uri() . '/assets/lightgallery/plugins/thumbnail/lg-thumbnail.min.js', array(), _S_VERSION, true );
       wp_enqueue_script( 'lightgallery-zoom-js', get_template_directory_uri() . '/assets/lightgallery/plugins/zoom/lg-zoom.min.js', array(), _S_VERSION, true );

3. add id and data-src links
4. include js

JS code that you use to initialize lightGallery.

document.addEventListener('DOMContentLoaded', () => {
    lightGallery(document.getElementById('gallery'), {
        plugins: [lgZoom, lgThumbnail],
        speed: 500,
    });

    const showMoreButton = document.querySelector('.gallery__show-more')
    showMoreButton?.addEventListener('click', () => {
        console.log('clc')
        // lightbox.open()
    })
})

Sample HTML markup

<div id="gallery" class="photos__images h-100 d-grid flex-1 gap-24 position-relative overflow-hidden">
                            {% for item in gallery[1:6] %}
                                <a class="overflow-hidden photos__item"
                                   data-src="{{- item.src -}}"
                                >
                                    <picture class="d-flex">
                                        <source srcset="{{- item.src|towebp(100) -}}" type="image/webp">
                                        <img src="{{- item.src -}}"
                                             alt="{{ item.alt }}"
                                             class="br-14 overflow-hidden object-fit-cover"
                                             loading="lazy"
                                        />
                                    </picture>
                                </a>
                            {% endfor %}
                        </div>

Environment

• Browser and version -
• OS -
• lightGallery version -

Additional context

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.