漂亮照片，“标题”；和工具提示

Question

在 PrettyPhoto 中，如何让照片描述来自 "title" 以外的内容（添加到 < 周围的 标签中） /代码>）？当将鼠标悬停在图像上时，它会在我的网站上显示丑陋的 html，我只想在打开时由 PrettyPhoto 看到和显示（因此它包含 html），但不作为工具提示。

我的一个想法是插入一个事件，但唯一相关的是changepicturecallback，我不知道如何从中访问当前的照片元素。

也许这是 jQuery 本身的东西，但我有点迷失在哪里可以找到它。

任何想法都会有所帮助。

谢谢， 伊戈尔

Answer 1

希望现在回答你的问题还不算太晚，但我最近不得不修改漂亮的照片代码来完成你所要求的事情。

有一行设置锚点的“标题”属性的描述。您可以更改它以从任何您想要的地方获取描述。我决定创建一个

存储描述的锚点下的标签。

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

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()”将找到

;锚点中的标签而不是使用“标题”属性。您可能想隐藏

使用 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

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

在 PrettyPhoto 标题中使用 HTML 格式

我知道这个问题已经得到解答，但我相信这种方法在格式方面允许更多的自由。

引自文章：

从您的站点打开 jquery.prettyPhoto.js 文件并找到该行
其中包含以下代码：

pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return
e(t).attr("标题")?e(t).attr("标题"):""}):e.makeArray(e(this).attr("标题"));

然后将其替换为 'alt' 属性：

pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return
e(t).attr("alt")?e(t).attr("alt"):""}):e.makeArray(e(this).attr("alt"));

这很好用，您可以使用“h2”标签和“p”标签来格式化您的标题。 但是这不允许W3 验证器验证页面。

因此，我没有使用“alt”属性，而是简单地将其替换为“aria-label”属性，瞧！它按预期工作并允许验证页面。

示例代码：

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

Answer 4

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

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

Answer 5

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

Answer 6

当您使用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 7

根据 Mitchell 所说：

我使用 .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 8

只需添加此

font-size: 0px !important;