使用 laravel 动态数据和灯箱答案

【问题标题】：Working with laravel dynamic data and lightbox使用 laravel 动态数据和灯箱
【发布时间】：2018-02-27 04:32:44
【问题描述】：

我的目标是创建一个图片库页面，当用户单击图片时，该页面会以模式显示图片，并能够通过单击左右箭头查看其他图片。我正在尝试使用lightbox by Lokesh Dhakar 来实现这一目标。我已将 lighbox.css 和 lightbox.js 添加到我的 laravel 项目中，并且我的视图可以正确渲染，但是当我单击 chromo 中的图像时，图像会在同一个选项卡中完全打开，因此我没有那种模态效果。从控制台我看到了这个警告信息

资源被解释为文档，但使用 MIME 类型 image/png 传输：“http://127.0.0.1:8000/images/albums/albumImg/ckmUU5_album_image.png”。

这是我第一次用 laravel 做这样的事情，所以我一直无法弄清楚我做错了什么。这是我下面的代码

<div class="card-columns mb-5" id="albumImgs">

@foreach($album->photos as $photo)

    <div class="card">

        <a href="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" data-lightbox="photos">

            <img class="card-img" src="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" alt="">

        </a>

    </div>

@endforeach

</div>

我需要帮助找出我做错了什么以及如何实现我的目标。

【问题讨论】：

标签： javascript php css laravel-5.4

【解决方案1】：

我找到了解决方案。该问题是由 jquery 文件引起的，bootstrap 4 默认附带 jquery slim 版本，并且它没有 fadeIn 功能。我所做的就是将 cdn 更改为 jquery.min，并且我的目标已经实现。我希望这对那里的人有所帮助。

【讨论】：