prettyPhoto,"标题"和工具提示

Question

在prettyPhoto中,如何让照片描述来自除了"title"(添加到<a>周围的标签<img>)以外的其他内容？当鼠标悬停在图像上时,它会在我的网站上显示丑陋的html,我只想在它打开时看到并由prettyPhoto显示(因此它包含html),但不是工具提示.

我有一个想法是插入一个事件,但唯一相关的是changepicturecallback,我无法弄清楚如何从中访问当前的照片元素.

也许这是jQuery本身的东西,但我有点迷失在哪里找到它.

任何想法都会有帮助.

谢谢,伊戈尔

Answer 1

希望这不是很晚才能回答你的问题,但我最近不得不修改漂亮的照片代码,以满足你的要求.

有一条线从锚的'title'属性设置描述.您可以更改它以从任何地方获取描述.我决定在存储描述的锚点下创建一个<p>标签.

要更改说明的来源,您必须修改漂亮的照片来源.找到如下所示的行:

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

它应该在第152行,至少从版本3.1.3开始.只需使用查找和替换工具来搜索"pp_descriptions".

把它改成这个:

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).find('p').text()) ? $(n).find('p').text() : ""; }) : $.makeArray($(this).find('p').text());

将"(this).attr('title')"改为".find('p').text()"将在锚点中找到<p>标签,而不是使用"title"属性.您可能希望使用CSS隐藏<p>标记,因此它不会显示在您的网站上.

现在html标记应如下所示:

<a href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <p>This is the Description</p>
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>