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屋！