如何解决Jekyll LightGallery 如何在自己的 DIV 中加载图像,对 Bootstrap 有用
教程 Using LightGallery in Jekyll without tedious configs 中的原始 album.html 如下(其中包含一些基本的 Jekyll、Liquid 循环代码):
<div id="{{include.albumname}}">
{% for image in site.static_files %}
{% if image.path contains 'images/galleryv2' and image.path contains include.albumname %}
<a href="{{ image.path }}" data-sub-html="{% exiftag image_description,{{ image.path }} %}" >
<img src="/thumbnails{{ image.path }}" />
</a>
{% endif %}
{% endfor %}
</div>
<script>
$('#{{include.albumname}}').lightgallery({
thumbnail:true,});
</script>
这很好用,没有任何问题。
然而,一旦我尝试将上述内容包含在 Bootstrap 中,就会发生以下情况:
当我尝试将图像包含在 Bootstrap 5 卡片中时,Lightgallery 缩略图仍然加载。但是,当我单击图像缩略图时,Lightgallery 已加载,但图像的大尺寸版本不存在,并且 Lightgallery 的下载图标也丢失了...
<div id="{{include.albumname}}">
<div class="album py-4 bg-light">
<div class="container">
<div class="row">
{% for image in site.static_files %}
{% if image.path contains 'images/galleryv2' and image.path contains include.albumname %}
<div class="col">
<div class="card shadow-sm">
<a href="{{ image.path }}" data-sub-html="{% exiftag image_description,{{ image.path }} %}" >
<img src="/thumbnails{{ image.path }}" class="bd-placeholder-img card-img-top img-fluid"/>
</a>
<div class="card-body">
ABC,some text here.
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<script>
$('#{{include.albumname}}').lightgallery({
thumbnail:true,});
</script>
事实上 {{ image.path }} 仍然有效。但是,只要 lightgallery 本身打开,链接就会默认并断开到 /undefined。
问题排查
事实上,问题似乎与 Bootstrap 无关。
如果您将原始代码放入任何随机 div 中,lightgallery 中的主要图像会同样中断(此处添加了 div class="doesntmatter"):
<div id="{{include.albumname}}">
{% for image in site.static_files %}
{% if image.path contains 'images/galleries' and image.path contains include.albumname %}
<div class="doesntmatter">
<a href="{{ image.path }}" data-sub-html="{% exiftag image_description,{{ image.path }} %}" >
<img src="/thumbnails{{ image.path }}" />
</a>
{% endif %}
{% endfor %}
</div>
</div>
<script>
$('#{{include.albumname}}').lightgallery({
thumbnail:true,});
</script>
请问我怎样才能完成这项工作?
似乎 Lightgallery 仅在 直接位于 <div id="{{include.albumname}}">
内时才有效,对吗?
如果您能告诉我如何获得 Lightgallery 画廊,循环浏览带有缩略图的 Bootstrap 5 卡片,那么您就赢得了答案和我的谢意! :)
解决方法
现在找到答案了!添加选择器:'a'。
<script>
$('#{{include.albumname}}').lightGallery({
thumbnail:true,selector: 'a',});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。