Question

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

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

也许这是jQuery本身的东西，但我在找到它的地方有点迷失。

任何想法都会有所帮助。

谢谢，伊戈尔

Answer 1

希望现在不能回答你的问题，但我最近不得不修改漂亮的照片代码，以满足你的要求。

有一条线从锚点的'title'属性设置描述。您可以更改它以从任何地方获取描述。我决定创建一个＆lt; p＆gt;存储描述的锚点下的标记。

要更改说明的来源，您必须修改漂亮的照片来源。找到如下所示的行：

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（）”将找到＆lt; p＆gt;锚点中的标记，而不是使用“标题”属性。你可能想要隐藏＆lt; p＆gt;使用CSS标记，因此它不会显示在您的网站上。

现在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>

Answer 2

我有类似的问题。但在我的情况下，只显示了第一个单词，因为HTML标记中缺少双引号，在这种情况下，请确保HTML中有 title = 标记并且引用：

<a title="Your Title Quoted" href="path/to/your/big-image.jpg" rel="prettyPhoto"> <img src="path/to/your/small-image.jpg" alt="caption text" /> </a>

希望这也会有所帮助。

Answer 3

这很好，但是如果我希望在标签中包含中断标签或重音标题，则此信息似乎不起作用，否则会破坏功能。我不敢相信漂亮的照片会让工具提示难以被禁用.....

谁真的希望用所有代码突出显示他们的描述？：P

Answer 4

谢谢凯尔!!!!!那真让我疯狂，最后你给我指路了。 :)我想添加如果你不想显示任何工具提示，只需在img标题中添加一个空格，即：title =“”否则它会忽略它并返回到锚标题。再次感谢！

Answer 5

当您使用 tipsy.js 时，只需在 jquery.prettyPhoto.js 中将“title”属性更改为“original-title”。

像这样：

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

Answer 6

以米切尔所说的为基础：

我使用.html（）而不是.text（），因为我使用了嵌套样式的跨度：

<span class="popup_text_cont">
      <span class="popup_caption_cont">
        <span class="popup_detail">
          <span class="popup_caption">Client</span>
          <span class="popup_basic_info">Playhouse Square Foundation</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Project</span>
          <span class="popup_basic_info">Broadway Buzz eNewsletter</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Skills</span>
          <span class="popup_basic_info">HTML, CSS</span>
        </span>
      </span>
      <span class="popup_description">
        Designed and implemented a templated eNewsletter that was distributed to theatergoers and Playhouse Square sponsors.
      </span>
    </span>

用这样的东西替换（在未压缩版本中我的第155行）。

if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('span.popup_text_cont').html()) ? $(n).find('span.popup_text_cont').html() : ""; }) : $.makeArray($(this).find('span.popup_text_cont').html());

Answer 7

只需添加此

即可

font-size: 0px !important;

Answer 8

我也遇到了这个问题，发现这篇文章对我有帮助：

Using HTML Formatting in PrettyPhoto Captions

我知道这个问题已经得到解答，但我相信这种方法可以在格式化方面提供更多自由。

文章引用：

从您的站点打开jquery.prettyPhoto.js文件并找到该行   包含以下代码：
     ？
pp_descriptions = isSet jQuery.map（邻，函数（T，N）{如果（E（t）的.attr（settings.hook）.indexOf（theRel）！= - 1）返回   E（t）的.attr（＆＃34;标题＆＃34;）E（t）的.attr（＆＃34;标题＆＃34）：＆＃34;＆＃34;}）：e.makeArray（E （本）.attr（＆＃34;标题＆＃34））;

然后将其替换为＆＃39; alt＆＃39;属性：

？
pp_descriptions = isSet jQuery.map（邻，函数（T，N）{如果（E（t）的.attr（settings.hook）.indexOf（theRel）！= - 1）返回 E（t）的.attr（＆＃34; ALT＆＃34;）E（t）的.attr（＆＃34; ALT＆＃34）：＆＃34;＆＃34;}）：e.makeArray（E （本）.attr（＆＃34; ALT＆＃34））;

这很好用，你可以使用＆＃34; h2＆＃34;标签和＆＃34; p＆＃34;用于格式化标题的标签。但是这不允许W3 Validator验证页面。

所以不要使用＆＃39; alt＆＃39;属性，我只需将其替换为“咏叹调”标签＆＃39;属性和瞧！它按预期工作，并允许页面验证。

示例代码：

<a href="path/to/your/big-image.jpg" rel="prettyPhoto" title="This is the native tooltip" aria-label="<h2> This is a caption.</h2> This caption has formatting and does not interfere with the native tooltips.">
    <img src="path/to/your/small-image.jpg" alt="alt-text" />
</a>

prettyPhoto，“标题”和工具提示

8 个答案: