Jekyll LightGallery 如何在自己的 DIV 中加载图像，对 Bootstrap 很有用答案

【问题标题】：Jekyll LightGallery how to load images inside their own DIVs, useful for BootstrapJekyll LightGallery 如何在自己的 DIV 中加载图像，对 Bootstrap 很有用
【发布时间】：2021-04-15 02:26:06
【问题描述】：

教程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 中（此处添加 div class="doesntmatter"），lightGallery 中的主要图像均会中断：

<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 卡片，那么你将赢得答案并感谢我！ :)

【问题讨论】：

标签： twitter-bootstrap loops jekyll lightgallery

【解决方案1】：

现在找到答案了！添加选择器：'a'。

<script>
    $('#{{include.albumname}}').lightGallery({
    thumbnail:true,
    selector: 'a',
});
</script>

与此处相同：https://stackoverflow.com/a/33995630/4367046

【讨论】：