Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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,

share|improve this question
    
I don't think you can do it without a filter –  thesrpr Apr 30 '12 at 5:59
    
A filter would be fine! Any suggestions for where to start? –  dunc Jun 8 '12 at 14:26

1 Answer 1

up vote 3 down vote accepted
+50

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.

share|improve this answer
    
Thanks Bainternet. What's the global $typenow; for? –  dunc Jun 26 '12 at 17:01
1  
silly left over from tests. i removed it. –  Bainternet Jun 26 '12 at 17:12
    
use the conditional tag is_singular() for single + page, include this two conditional tags. Also it is better, you include the script with wp function wp_enqueue_script(), so its easier and stable to load the right scripts. –  bueltge Jun 29 '12 at 10:48
    
@bueltge is_singular will also return true on cpt and that's not always the needed case –  Bainternet Jun 29 '12 at 11:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.