有没有办法使用 fancybox 在“alt”属性中添加 HTML 代码
Is there a way to add HTML code inside the 'alt' attribute using fancybox?
我正在尝试查看是否有可能通过html或使用某种javascript在图像的"alt"标签中添加html代码。我正在使用花式盒子作为我的图片库。我正在尝试使用fancybox作为显示图像的表单,并在图像的描述中,添加带有样式的信息(如项目符号和中断),并添加一个按钮,将带您到不同的页面。目前我有按钮工作,但该按钮在javascript中,因此每个花哨的盒子图像都有该按钮和相同的URL。我希望每个图像上的每个按钮都有不同的链接。
这是我拥有的 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' },
}
});
索引中的 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-*
属性,如 data-desc
,或任何您喜欢的属性。它们在浏览器或搜索引擎中没有默认处理,因此可以安全地用于私人目的。
相关文章:
- 选中单选框时将属性添加到输入字段
- 将css属性添加到对象的集合中
- 用javascript向数组(?)中的特定属性添加值
- AngularJs,在没有隔离的情况下将指令属性添加到作用域
- 如何将enctype属性添加到FormData()对象中
- 如何将属性添加到自定义角度指令
- 如何将额外的属性添加到bootstrapTable中
- 在 Javascript 生成的列表中,如何将自定义属性添加到 标记
- 将动态属性添加到对象末尾
- 向 JSON 对象属性添加引号
- 将地理 JSON 要素属性添加到地图框弹出窗口
- 是否有脚本/代码可以一次将链接属性添加到多个链接
- 将自定义属性添加到 vuejs 组件
- 将属性添加到带有href链接但没有#的元素
- 将属性添加到数组中的所有对象
- Jquery将data-rel属性添加到所有输入字段,并移除name属性
- 将属性添加到窗元素时是否引发事件
- 将onsubmit属性添加到表单并提交
- 将属性添加到数组中的每个对象
- 如何使用jQuery向属性添加值