Question

我的目标是拥有一个图片库页面，当用户点击图片并通过点击左右箭头查看其他图片时，该图片库以模态显示图像。我试图用lightbox by Lokesh Dhakar来实现这一目标。我已将lighbox.css和lightbox.js添加到我的laravel项目中并且我的视图呈现正确但当我单击chromo中的图像时，图像会在同一个选项卡中完全打开，这样我就不会有这种模态效果。从控制台我看到此警告消息

资源被解释为文档但使用MIME类型传输图像/ png：＆＃34; http://127.0.0.1:8000/images/albums/albumImg/ckmUU5_album_image.png＆＃34;。

这是我第一次用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>

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

Answer 1

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

使用laravel动态数据和灯箱

1 个答案: