我正在使用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
更多推荐
alt,tag,标签,image,class,电脑培训,计算机培训,IT培训"/> <meta name="descri
发布评论