Skip to content

Does not work here #534

@blablabla1234678

Description

@blablabla1234678

Hi!
I am looking for a lightbox script and this one appears to be exactly what I need. My only problem that I cannot make it work. :S
I am using Laravel, here is the relevant part of my blade template file:

<x-layout>
    <x-slot:scripts>
        <link rel="stylesheet" href="{{URL::asset('css/glightbox.min.css')}}" />
        <script type="text/javascript" src="{{URL::asset('js/glightbox.min.js')}}"></script>
        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function (){
                const lightbox = GLightbox({
                    selector: "glightbox",
                    touchNavigation: true,
                    loop: true,
                    autoplayVideos: true
                });
            });
          </script>
    </x-slot>
    <div class="container">
        a product<br />
        @foreach ($product->gallery->images as $item)
            <a href="{{URL::asset($item->image->path)}}" class="glightbox">
                <img src="{{URL::asset($item->image->path)}}" alt="{{$item->image->translation->text}}" />
            </a>
        @endforeach
    </div>
</x-layout>

The script and css is loaded, I got the images too, but when I click on them they behave like normal images with anchors, so the script does not seem to run. What am I doing wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions