How can I implement lightbox in Laravel 8

Question

I'm trying to implement image gallery using lightbox but it's not working

these are the script I've called in the head

    <script src="https://kit.fontawesome.com/1ae30b6763.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="{{ asset('js/app.js') }}" ></script>
    <script src="{{ asset('js/lightbox.min.js') }}" ></script>
    

and this is my CSS links

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/welcome.css') }}" rel="stylesheet">
    <link href="{{ asset('css/lightbox.min.css') }}" rel="stylesheet">
    

and these are code in my galler.blade.php

<div class="row">
                @foreach ($galleryImages as $galleryImage)
                <div class="col-md-4 mb-2 ">
                    <div class="card">
                        <div class="card-body">
                            <img class="gallery-image" src="{{ asset('gallery_images/'.$galleryImage->image) }}" data-lightbox="roadtrip" alt="" style="width:100%">
                        </div>
                    </div>
                   
            </div>

Answer 1

I choose to use CDN for lightbox

in head tag

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">

in gallery controller

enter code here

@foreach ($galleryImages as $galleryImage)
   <div class="col-sm-6 col-md-4 col-lg-3 item">
  <a href="{{ asset('gallery_images/'.$galleryImage->image) }}" data-lightbox="photos">
    <img class="img-fluid" src="{{ asset('gallery_images/'.$galleryImage->image) }}">
  </a>
   </div>
@endforeach

at the end of body tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>