Question

我正在试图弄清楚为什么动态插入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] }}保存项目＆gt;的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”>

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

知道为什么会这样吗？

使用嵌套YAML列表（Jekyll）在Fancybox中呈现的非连续alt标记

0 个答案: