Add a Fancybox automatically to post type "post" images

Question

Currently, on my homepage (which is a list of posts), if you click an image it opens in the same window as a full size image.

I'd like to change it so that when a user clicks said image it opens into a Fancybox pop-up.

I've got my Fancybox code, which works on my Custom Post Type pages (because I've been able to set the class/rel for these images):

// fancybox
jQuery( document ).ready( function( $ ) {
    $("a img.fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true,
        'overlayOpacity':   0.7,
        'overlayColor'  :   '#333',
        'titlePosition' :   'over'
    });
});

But I don't know how to add Fancybox to the code that WordPress automatically gives to its linked images in posts:

<div id="attachment_542" class="wp-caption alignleft" style="width: 135px">
    <a href="http://www.xxx.com/wp-content/uploads/2011/12/Amazonas-English-1.jpg">
        <img class="size-thumbnail wp-image-542 fancybox" title="Amazonas English" src="http://www.xxx.com/wp-content/uploads/2011/12/Amazonas-English-1-288x381.jpg" alt="Amazonas English" width="125" height="165">
    </a>
    <p class="wp-caption-text">Amazonas Magazine - now in English!</p>
</div>

Any suggestions? Is there a way I can do this using just the jQuery selector on Fancybox, or will I have to implement a WP filter to amend post-inserted image links so that they include a specific id/class?

Thanks in advance,

Answer 1

Here is the code i use in my site, which loads all images under an anchor tag to fancybox

add_action('wp_footer','auto_fancy_box');
function auto_fancy_box(){
    if (!is_single() && !is_page())
        return;
    ?>
    <SCRIPT TYPE="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".post_content").find("a:has(img)").addClass('group');
        jQuery(".post_content").find("a:has(img)").attr('rel','group1');
        jQuery("a.group").fancybox({'transitionIn':'elastic','transitionOut':'elastic','speedIn':600,'speedOut':200,'overlayShow':false});
    });
    </SCRIPT>
<?php 
}

just change the .post_content to your post content container jQuery selector.