1

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,

2
  • I don't think you can do it without a filter
    – thesrpr
    Apr 30, 2012 at 5:59
  • A filter would be fine! Any suggestions for where to start?
    – turbonerd
    Jun 8, 2012 at 14:26

1 Answer 1

3
+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.

4
  • Thanks Bainternet. What's the global $typenow; for?
    – turbonerd
    Jun 26, 2012 at 17:01
  • 1
    silly left over from tests. i removed it.
    – Bainternet
    Jun 26, 2012 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, 2012 at 10:48
  • @bueltge is_singular will also return true on cpt and that's not always the needed case
    – Bainternet
    Jun 29, 2012 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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