微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。