Question

我们有一个客户端使用wysiwyg编辑器将多张照片和不同位添加到自定义帖子类型。

它们包含使用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>

Answer 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（因为页面上可能有很多图片），请执行以下操作

从插入的标题中捕获文本
将文字添加到title元素

img

删除标题p元素

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

Answer 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'
        }
    }
});

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

Answer 3

抓住它，然后转到fancybox。

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

Wordpress标题为Fancybox标题

3 个答案: