Wordpress Caption as Fancybox title

Question

We have a client that is using a wysiwyg editor to add multiple photos and different bits to a custom post type.

They are including a caption using the Wordpress Image caption functionality.

How would we be able to (efficiently) use Fancybox's title option to do this?

Here is the structure:

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

that would be very simple using fancybox v2.x (you would need to hard-code it into WordPress). here it is how http://stackoverflow.com/a/9611664/1055987 — JFK, Mar 29 '12 at 19:03

score 2 · Accepted Answer · answered Mar 29 '12 at 02:30

I think you might want something like this

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

Explanation:

For each pic div (as there may be many on the page), do the following

capture the text from the caption as inserted
add the text to title attribute in the img element
remove the caption p element

Example: http://jsfiddle.net/ZVu9e/

I was hoping that I wouldn't have to use a performance suck like .find but I don't think there is any other way… — Robert C Edwards, Mar 29 '12 at 16:56

score 1 · Answer 2 · answered Mar 16 '15 at 16:29

I ended up using a hook in the functions.php file instead of 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);

This will return the caption from the attachment and add it to the <a> tag as a title for most JQuery lightbox plugins.

For example, in Fancybox:

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

The caption will now appear in the lightbox.

score 0 · Answer 3 · answered Mar 29 '12 at 02:15

0

Grab it, then pass to fancybox.

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

answered Mar 29 '12 at 02:15

Matthew Blancarte

8,251
2
25
34

Wordpress Caption as Fancybox title

3 Answers3