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">
    <p class="wp-caption-text">Amazonas Magazine - now in English!</p>

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,

  • 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

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

function auto_fancy_box(){
    if (!is_single() && !is_page())
    <SCRIPT TYPE="text/javascript">

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

|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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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