在 Fancybox 下方添加描述文本而不是使用标题属性？答案

【问题标题】：Adding description text below Fancybox rather than use title attribute?在 Fancybox 下方添加描述文本而不是使用标题属性？
【发布时间】：2012-02-01 08:53:34
【问题描述】：

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

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

如您所见，对于我在 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',
});

【问题讨论】：

你可以为你的每张图片强制title，你能把代码贴在你定义fancybox的地方吗？ fancybox.net/api 到 Advanced Options
现在只看高级选项，看看如何使用它来解决我的问题。我将在几秒钟内发布代码（我将编辑我的原始帖子）

标签： javascript jquery fancybox

【解决方案1】：

为你的链接创建一个新的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')
    });
})

【讨论】：

谢谢 - 嗯，我似乎快到了，但我现在打破了我的 Fancybox - 这是其中一张图片的代码：mediaite.com/wp-content/uploads/2011/04/colbertSUperPAC.jpg" title="colbert super pac"> 你在 rel 属性中看到的是编码的 HTML，但是现在当我点击缩略图时，Fancybox 没有弹出......很奇怪。
您是从服务器站点动态添加这些链接吗？
是的，我在 PHP 中使用 htmlentities($url) 作为 rel 属性。如果我使用像“test”或“hello”这样的纯文本 rel 值，Fancybox 会很好地弹出标题，但我真的希望该标题改为 URL。
好吧，不用写在rel tag你可以直接生成它作为脚本的一部分来替换：title: $(this).attr('rel')：/
哇！感谢您的建议，它奏效了。我所做的是，让 PHP 在每张图片之后生成一个 span 元素，然后我使用 jQuery 在每张图片之后获取下一个同级元素，并获取 span 的 title 属性，现在它可以工作了......似乎比平时工作更多但我很高兴。 :)