0

我试图弄清楚为什么动态插入到 Fancybox 3 渲染的 img 标记中的 alt 标记以看似随机的顺序出现。

我在 Jekyll 中有一个 YAML 列表，并且 alt 标签存储在图像之后：

- project:
  -
    name: Jupiter
    thumb_url: jupiter-thumb.png
    thumb_alt: Jupiter!
    main:
      - image: jupiter_pic_1, alt1
      - image: jupiter_pic_2, alt2
      - image: jupiter_pic_3, alt3
      - image: jupiter_pic_4, alt4

我有一个使用 Fancybox 的循环：

        {% for main in project.main %}

          {% assign main = site.data.project[0].main[0] %}
          {% assign data = main.image|split:"," %}

            <a class="fancybox" data-fancybox="{{ project.name }}" href="{{ site.baseurl }}/{{ site.image_path }}/{{ data[2] | strip }}/{{ data[0] }}.png"
            data-caption="{{ site.blurb }}" data-alt="{{ data[1] }}">

            <img src="{{ site.baseurl }}/{{ site.image_path }}/{{ project.thumb_url }}" alt="{{ project.thumb_alt }}" /></a>

        {% endfor %}

因此循环遍历 YAML 列表并获取相关信息（项目名称、URL、alt 标签）并将其插入到 Fancybox 标记中。

我有这个 jQuery，为渲染的 Fancybox 图像标记添加一个 alt 标记。我认为这个问题与这个的加载间隔有关：

$("[data-fancybox]").fancybox({
    afterLoad: function (instance, slide) {
       $(".fancybox-image").attr("alt", slide.opts.$orig.data('alt'));
    }
  });

{{ data[1] }}保存项目 > 主中的 alt 标签。

当我加载页面并检查它时，我看到了这个：

<img class="fancybox-image" src=“/path/to/jupiter_pic_1.png" alt=" alt4">

但它应该是：

<img class="fancybox-image" src="/path/to/jupiter_pic_1.png" alt=" alt1">

当我滚动到下一张图片时，它应该是：

<img class="fancybox-image" src="/path/to/jupiter_pic_2.png" alt=" alt2">

但是，在页面源代码中，标记正是应有的方式：

<a class="fancybox" data-fancybox="Jupiter" href="/path/to/jupiter_pic_1.png"
            data-caption="A caption" data-alt=" alt1”&gt;

            <img class="img-responsive" src="/path/to/jupiter-thumb.png" alt="Jupiter!" /></a>

知道为什么会这样吗？

4

0 回答 0