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>

Answer 1

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

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

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