在Fancybox下面添加描述文本，而不是使用title属性

Adding description text below Fancybox rather than use title attribute?

本文关键字：属性 title Fancybox 添加 文本 描述      更新时间：2023-09-26

有没有办法在Fancybox框中添加文本，而不必使用title属性？为了说明我遇到的问题，这里有一张图片显示在我的页面上，它使用了Fancybox：

http://dl.dropbox.com/u/12453703/fbox01.PNG

正如您所看到的，对于title属性，我已经将其放入HTML中，因此图片标题是指向网页的链接。它看起来不错，工作也很好。然而，糟糕的是，当我指向Fancybox的缩略图时，我得到了原始的HTML代码：

http://dl.dropbox.com/u/12453703/fbox02.png

有什么变通办法吗？在放大的图像中有HTML链接，但只是弹出缩略图工具提示的文本？或者（正如我的标题所示），在图像下面有一些独立的文本，它与标题文本是分开的？

（我在Fancybox文档中没有发现任何关于这个问题的有用信息，但我可能错了。）

谢谢。

  • 编辑，我现在使用的代码非常简单：
$("a.single_image").fancybox(
{
    transitionIn: 'elastic',
    transitionOut: 'elastic',
    easingIn: 'easeInOutBack',
    easingOut: 'easeOutBack',
    speedIn: 300,
    speedOut: 300,
    cyclic: true    ,
    titlePosition: 'over',
});

为您的链接创建一个新的attribute，我将称之为rel:

<a href="myimg.jpg" class="single_image" rel="My Title"><img src="myimg.jpg" /></a>
$("a.single_image").each(function(){
    $(this).fancybox({
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        easingIn: 'easeInOutBack',
        easingOut: 'easeOutBack',
        speedIn: 300,
        speedOut: 300,
        cyclic: true    ,
        titlePosition: 'over',
        title:  $(this).attr('rel')
    });
})
相关文章：