gpt4 book ai didi

javascript - 有没有办法使用 fancybox 在 'alt' 属性内添加 HTML 代码?

转载 作者:行者123 更新时间:2023-11-28 20:18:10 25 4
gpt4 key购买 nike

我试图看看是否可以通过 html 或使用某种 JavaScript 在图像的“alt”标签内添加 html 代码。我正在使用 fancybox 作为我的图片库。我正在尝试使用 fancybox 作为显示图像的表单,并在图像的描述上添加带有样式的信息(如项目符号点和中断),并添加一个按钮,将您带到不同的页面。目前我的按钮可以工作,但该按钮位于 javascript 中,因此每个 fancybox 图像都有该按钮和相同的 url。我希望每个图像上的每个按钮都有不同的链接。

这是我目前在 fancybox 中的图像下显示替代文本的 javascript。

$(".fancybox").fancybox({               
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4>' + '<div style="width:100%; height: 150px; overflow: auto;">' + $(this.element).parent().find('img').attr('alt') + '<a class="button button-small" href="http://www.google.com"> Sign Up </a>' + '</div>';
},
helpers : {
title : { type: 'inside' },
}
});

该 fancybox 的 index.html 中的 html 是:

<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>

最佳答案

alt 属性(不是标签)根据定义是纯文本,因此您在其中插入的任何内容都将被浏览器视为纯文本(不是标记)。如果您乱搞代码,将看起来像 HTML 标签的字符串插入到 alt 属性值中,然后将它们作为标记进行解析和处理,这与使用其他属性进行类似的操作没有什么不同。

alt 属性有一个明确定义的工作,当图像未显示但例如口头、用盲文设备呈现或显示为文本。因此,尝试将其用于其他目的是没有成效的。

类似的注意事项也适用于 title 属性。

要使用将被解析为 HTML 的数据,最好使用自定义属性,特别是 data-* attribute ,例如 data-desc,或任何您喜欢的内容。它们在浏览器或搜索引擎中没有默认处理,因此可以安全地用于私有(private)目的。

关于javascript - 有没有办法使用 fancybox 在 'alt' 属性内添加 HTML 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18856715/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com