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

Question

教程 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 本身打开，link 默认并中断为 /undefined.

疑难解答

其实问题似乎与Bootstrap无关。

lightGallery 中的主要图像如果你只是将原始代码放入任何随机 div（这里添加 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 张带有缩略图的卡片，那么你就赢得了答案和我的感激之情！ :)

Answer 1

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

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

同这里：

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

Jekyll LightGallery how to load images inside their own DIVs, useful for Bootstrap

loops

jekyll

twitter-bootstrap

lightgallery

疑难解答