Fancybox alt标签循环(Fancybox alt tag loop)

Fancybox alt标签循环(Fancybox alt tag loop)

我正在使用Fancybox 3，我需要在渲染的弹出图像标签中插入一个alt标签（这一个:)

<div class="fancybox-placeholder" style="transform: translate3d(311px, 44px, 0px); width: 454px; height: 318px; opacity: 1; transition: none 0s ease 0s ;"> <img class="fancybox-image" src="pathtoimage/image.png" alt="This needs an alt tag but right now doesn't have one"> </div>

有没有办法做到这一点？

这是我的标记，在Jekyll中循环：

<a class="fancybox" data-fancybox="{{ project.name }}" href="{{ path to image }}.png" data-caption="{{ site.blurb }}" title="{{ data[1] }}"> <img src="{{ path to thumbnail }}.png" alt="{{ data[1] }}" /> </a>

{{ data[1] }}是我定义alt标签的地方。 缩略图alt标签似乎覆盖了标签中的标题。 有没有办法得到它，以便在弹出主图像时，有一个与之关联的alt标签（或标题标签）？

我尝试了这个，但由于某种原因它不起作用：

$("[data-fancybox]").fancybox({ image : '<img class="fancybox-image" src="{href}" alt="" />', });

I'm using Fancybox 3 and I need to insert an alt tag into the rendered pop up image tag (this one:)

<div class="fancybox-placeholder" style="transform: translate3d(311px, 44px, 0px); width: 454px; height: 318px; opacity: 1; transition: none 0s ease 0s ;"> <img class="fancybox-image" src="pathtoimage/image.png" alt="This needs an alt tag but right now doesn't have one"> </div>

Is there a way to do this?

This is my markup, looped in Jekyll:

<a class="fancybox" data-fancybox="{{ project.name }}" href="{{ path to image }}.png" data-caption="{{ site.blurb }}" title="{{ data[1] }}"> <img src="{{ path to thumbnail }}.png" alt="{{ data[1] }}" /> </a>

{{ data[1] }} is where I've defined the alt tag. The thumbnail alt tag seems to override the title in the a tag. Is there a way to get it so that when the main image is popped up, there is an alt tag (or title tag) associated with it?

I tried this but it's not working for some reason:

$("[data-fancybox]").fancybox({ image : '<img class="fancybox-image" src="{href}" alt="" />', });

最满意答案

你可以做这样的事情，为a标签添加数据属性

<a class="fancybox" data-fancybox="{{ project.name }}" href="{{ path to image }}.png" data-caption="{{ site.blurb }}" title="{{ data[1] }}" data-alt="{{data[1]}}"> <img src="{{ path to thumbnail }}.png" alt="{{ data[1] }}" /> </a>

然后在这里

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

这是一个问题的工作codepen

you can do something like this, add a data attribute to the a tag

<a class="fancybox" data-fancybox="{{ project.name }}" href="{{ path to image }}.png" data-caption="{{ site.blurb }}" title="{{ data[1] }}" data-alt="{{data[1]}}"> <img src="{{ path to thumbnail }}.png" alt="{{ data[1] }}" /> </a>

and then here

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

here is a working codepen for the problem