Wordpress 标题作为 Fancybox 标题答案

【问题标题】：Wordpress Caption as Fancybox titleWordpress 标题作为 Fancybox 标题
【发布时间】：2012-03-29 02:00:31
【问题描述】：

我们有一个客户正在使用所见即所得的编辑器将多张照片和不同的位添加到自定义帖子类型。

它们包含使用 Wordpress 图片标题功能的标题。

我们如何能够（有效地）使用 Fancybox 的 title 选项来做到这一点？

结构如下：

<div id="attachment_180" class="wp-caption">
    <a href="image.jpg" rel="performance">
        <img class="size-full" src="someimagethumb.jpg">
    </a>
    <p class="wp-caption-text">The Image Caption</p>
</div>

【问题讨论】：

使用fancybox v2.x 会非常简单（您需要将其硬编码到WordPress 中）。这是stackoverflow.com/a/9611664/1055987

标签： jquery wordpress fancybox caption

【解决方案1】：

我想你可能想要这样的东西

$('div.wp-caption').each(function(){
    var caption = $(this).find('p.wp-caption-text').text();
    $(this).find('img').attr('title',caption);
    $(this).find('p.wp-caption-text').remove();    
});

说明：

对于每张图片div（因为页面上可能有很多），请执行以下操作

从插入的标题中捕获文本
将文本添加到img 元素中的title 属性
移除标题p元素

示例： http://jsfiddle.net/ZVu9e/

【讨论】：

我希望我不必使用像 .find 这样的性能差，但我认为没有其他方法......

【解决方案2】：

我最终在 functions.php 文件中使用了一个钩子，而不是 JQuery：

function add_title_attachment_link($link, $id = null) {
    $id = intval( $id );
    $_post = get_post( $id );
    $post_title = esc_attr( $_post->post_excerpt );
    return str_replace('<a href', '<a title="'. $post_title .'" href', $link);
}
add_filter('wp_get_attachment_link', 'add_title_attachment_link', 10, 2);

这将从附件中返回标题并将其添加到<a> 标记中，作为大多数 JQuery 灯箱插件的标题。

例如，在 Fancybox 中：

$(".fancybox").fancybox({
    helpers : {
        title : {
            type : 'over'
        }
    }
});

标题现在将出现在灯箱中。

【讨论】：

【解决方案3】：

抓住它，然后传递给fancybox。

var txt = $( '.wp-caption-text' ).text();
//do fancybox with txt passed to the title property

【讨论】：