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>

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