Jekyll LightGallery如何在自己的DIV中加载图像,对Bootstrap很有用 [英] Jekyll LightGallery how to load images inside their own DIVs, useful for Bootstrap
问题描述
教程album.html ="nofollow noreferrer">在Jekyll中使用LightGallery而不进行繁琐的配置如下(其中有一些基本的Jekyll,Liquid循环代码):
The original album.html from the tutorial Using LightGallery in Jekyll without tedious configs is the following (there's some basic Jekyll, Liquid looping code in there):
<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中,就会发生以下情况:
As soon as I try to include the above inside Bootstrap however, the following happens:
当我尝试将图像包含在Bootstrap 5卡中时,仍然会加载LightGallery缩略图.但是,当我单击图像缩略图时,将加载LightGallery,但是图像的大规模版本不存在,然后缺少LightGallery的下载图标...
When I try to include the images in Bootstrap 5 cards, then the LightGallery thumbnails still loads. When I click an image thumbnail however, the LightGallery loads, but the large-scale-version of the images are not present, and also the download icon of LightGallery is missing then ...
为什么会是这种情况?我正在尝试的修改后的代码是:
Why could this be the case please? The modified code I am trying is:
<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 .
In fact the the {{ image.path }} still works. However, as soon as the lightGallery itself opens, the link defaults and breaks to /undefined.
实际上,问题似乎与Bootstrap无关.
In fact the problem seems to have got nothing to do with Bootstrap.
如果只是将原始代码放在任意随机div中(在此处添加 div class ="doesntmatter" ),则lightGallery中的主图像会平均断裂:
The main images inside the lightGallery break equally if you just put the original code inside any random div (here added 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>
请问我该如何进行这项工作?
How can I make this work please?
似乎LightGallery仅在< a href = 直接在<div id="{{include.albumname}}">
内时正确吗?
It seems LightGallery only works when the <a href= is directly within the <div id="{{include.albumname}}">
is that correct?
如果您可以向我展示如何获得LightGallery画廊,并在其中浏览带有缩略图的Bootstrap 5卡,那么您将赢得答案和我的感激! :)
推荐答案
立即找到答案!添加选择器:'a'.
<script>
$('#{{include.albumname}}').lightGallery({
thumbnail:true,
selector: 'a',
});
</script>
与此处相同: https://stackoverflow.com/a/33995630/4367046
这篇关于Jekyll LightGallery如何在自己的DIV中加载图像,对Bootstrap很有用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!