如何在Laravel 8中实现lightbox？

Question

我试着用lightbox实现图像库，但它不起作用

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>

​

这是我的CSS链接

​

    <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">

​

这些是我的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

我选择使用CDN作为照明盒。

头部标签

​

    <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">

内廊控制器

​

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>

​