Question

我试图通过html或使用某种javascript来查看是否可以在图像的'alt'标记内添加html代码。我使用fancybox作为我的图片库。我正在尝试使用fancybox作为表单来显示图像和图像描述，添加样式信息（如项目符号和中断），并添加一个按钮，将您带到不同的页面。目前我有按钮工作，但该按钮在JavaScript中，所以每个fancybox图像都有该按钮和相同的网址。我希望每个图像上的每个按钮都有不同的链接。

这是我目前在jancybox中的图片下方显示替代文字的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>

Answer 1

alt属性（非标记）根据定义是纯文本，因此无论您插入什么，浏览器都会将其视为纯文本（不是标记）。如果您乱用代码将类似HTML标记的字符串插入alt属性值，然后将其解析并处理为标记，则与其他属性的类似播放没有区别。

alt属性具有明确定义的作业，在图像未显示时用作图像的文本替换，例如，口语，用盲文设备呈现，或显示为文本。因此，尝试将其用于其他目的是非生产性的。

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

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

有没有办法使用fancybox在'alt'属性中添加HTML代码？

1 个答案: