0

I've been searching for a better way to utilize the built in Thickbox function for images. I've been using my method for a few months, but I don't think it's the best way to do it. Here is the code I've been using (I don't remember where I found the code or I'd link to the article):

<?php
if (!is_admin()){
/*
add a word found in your domain name
*/
$mydomain = ".com";
/*
The css selector
.entry-content a img 
*/
$myselector = "p a img";
wp_enqueue_style('thickbox'); //include thickbox .css
wp_enqueue_script('jquery');  //include jQuery
wp_enqueue_script('thickbox'); //include Thickbox jQuery plugin
    // Function that will write js
    function thickbox_js(){
        global $mydomain, $myselector;
        ?>
        <script type='text/javascript'>
         var tb_closeImage = "<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/tb-close.png";
         var tb_pathToImage = "<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/loadingAnimation.gif";
         jQuery(document).ready(function() {
             jQuery("<?php echo $myselector; ?>").parent("a[href*=<?php echo $mydomain; ?>]").addClass("thickbox");
         });
        </script>
    <?php
    }
add_action('wp_footer', 'thickbox_js'); // use wp_footer hook to write our generated javascript into page footer.
}
?>

Any suggestions would be appreciated. I've tried several different methods listed in tutorials, but none have worked. Thanks...

To be more specific, this is the part in question:

<?php bloginfo('wpurl'); ?>

What I'm using now:

<?php
    function add_themescript(){
     if(!is_admin()){
     wp_enqueue_script('thickbox',null,array('jquery'));
     wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
     }
}
 add_action('init','add_themescript');

define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
function wp_thickbox($string) {
$pattern = '/(<a(.*?)href="([^"]*.)'.IMAGE_FILETYPE.'"(.*?)><img)/ie';
$replacement = 'stripslashes(strstr("\2\5","rel=") ? "\1" : "<a\2href=\"\3\4\"\5 class=\"thickbox\"><img")';
  return preg_replace($pattern, $replacement, $string);
}

function wp_thickbox_rel( $attachment_link ) {
$attachment_link = str_replace( 'a href' , 'a rel="thickbox-gallery" class="thickbox" href' , $attachment_link );
  return $attachment_link;
}
add_filter('the_content', 'wp_thickbox');
add_filter('wp_get_attachment_link' , 'wp_thickbox_rel');
?>

I thinks that's a little better, but I'm still not sure it's the optimal way. Next I need to learn how to add navigation to the ThickBox pop-up images.

3
  • this looks about right
    – Bainternet
    Aug 6, 2011 at 0:32
  • Thanks Bainternet, I've revised to question to be more specific. One more question, how would I allow showing all images on a post/page? Let me know if this should this be a separate question and I'll re-post it in more detail. Thanks, Jeremy Jared. Aug 6, 2011 at 3:11
  • 1
    CSS enqueues should go in the head, JS is fine in the footer though.
    – t31os
    Aug 6, 2011 at 10:57

2 Answers 2

1

What if you try adding this to your functions.php

function tb(){
    wp_enqueue_script('thickbox',null,array('jquery'));
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
}
add_action('wp_enqueue_scripts','tb');

and keeping your bit of jQuery (not sure what your are needing those php variables for):

 jQuery(document).ready(function() {
             jQuery("img").parent("a").addClass("thickbox");
         });
5
  • Hi Zac ,could you give a complete sample of the code as you would use it? I've tried implementing your suggestion with not luck. I'm sure it's something I'm doing wrong, but I just can't get it to work. Aug 6, 2011 at 4:57
  • Hi Jeremy, When you add that function do you see thickbox loaded in your source?
    – zac
    Aug 6, 2011 at 5:39
  • 4
    Enqueues should never be done on init.
    – t31os
    Aug 6, 2011 at 10:56
  • I ended up trying something else. I couldn't get Zac's code to work, but I notice it is very similar to what I am using now. I've been using the beta testers plug-in on most of my development sites. This seems to have caused some issues with my script and the ones that were suggested. It notice things were strange when I checked my permalinks, and they kept switching on me. After investigation things, I realized it was because I was using an unstable version of WordPress. I switched to the latest reslease and everything is working like expected now. Aug 7, 2011 at 2:04
  • @t31os I was having an annoying white flash on my site as the DOM was loading improperly. I remembered your comment and taking it off init was what it needed. Thanks :)
    – zac
    Sep 19, 2011 at 4:35
2

The accepted answer above is a bit dated, and since then it's gotten a lot easier to add a Thickbox gallery to default WordPress sites.

1: Enqueue thickbox JS and CSS

This can now be done quite easily using the built-in WordPress default handles:

add_action( 'wp_enqueue_scripts', 'wpse25112_scripts' );
function wpse25112_scripts(){
  // enqueue the thickbox scripts and styles
  wp_enqueue_script( 'thickbox' );
  wp_enqueue_style( 'thickbox' );

  // enqueue your own JavaScript
  wp_enqueue_script( 'my-thickbox-script', 'path/to/my-thickbox-script.js', array( 'jquery', 'thickbox' ), '1.0.0' );
}

2: Activate Thickbox on WordPress Gallery Images

This can be done using a bit of jQuery inside your custom JavaScript file that we enqueued in the above bit of code:

;jQuery(function($){
    $(".gallery a").addClass("thickbox");
});

This ensures we're only adding Thickbox functionality to the WordPress gallery images (not every img wrapped in an a tag as per other examples).

3: Create your gallery

This is done through the WordPress Add Media button on any Post or Page. Just look for the "Gallery" tab. Important: make sure that you choose "link to media file" rather than "link to attachment" in order for the image to properly pop up in the Thickbox modal (otherwise a copy of your web page will pop up instead!).

4: Bonus! Make sure you're only enqueueing this stuff when there's actually a WordPress gallery present on the page

This is the fun part. Why enqueue 16K of scripts and CSS (okay, that's really not a lot but still) when you don't need it? Here we check to see whether there's actually the [gallery] shortcode somewhere in the content before we actually enqueue anything...

Modify the above enqueue function as follows:

function wpse25112_scripts(){
    /** @var WP_Post $post */
    $post = get_post();

    // Short circuit if something goes wrong
    if ( ! is_a( $post, 'WP_Post' ) ){
        return;
    }

    // Does this Post have the default WordPress [gallery] shortcode?
    if ( preg_match( "/\[\s*gallery(?:\s|\])/i", $post->post_content ) ){
        // enqueue the thickbox scripts and styles
        wp_enqueue_script( 'thickbox' );
        wp_enqueue_style( 'thickbox' );

        // enqueue your own JavaScript
        wp_enqueue_script( 'my-thickbox-script', 'path/to/my-thickbox-script.js', array( 'jquery', 'thickbox' ), '1.0.0' );
    }
}

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.