如何在 Laravel 8 中实现灯箱答案

【问题标题】：How can I implement lightbox in Laravel 8如何在 Laravel 8 中实现灯箱
【发布时间】：2021-01-18 00:09:53
【问题描述】：

我正在尝试使用灯箱实现图片库，但它不起作用

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>

【问题讨论】：

标签： lightbox2 laravel-8

【解决方案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>

【讨论】：