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.

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.

share|improve this question
    
this looks about right –  Bainternet Aug 6 '11 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. –  Jeremy Jared Aug 6 '11 at 3:11
1  
CSS enqueues should go in the head, JS is fine in the footer though. –  t31os Aug 6 '11 at 10:57
add comment

1 Answer

up vote 1 down vote accepted

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('init','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");
         });
share|improve this answer
    
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. –  Jeremy Jared Aug 6 '11 at 4:57
    
Hi Jeremy, When you add that function do you see thickbox loaded in your source? –  zac Aug 6 '11 at 5:39
2  
Enqueues should never be done on init. –  t31os Aug 6 '11 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. –  Jeremy Jared Aug 7 '11 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 '11 at 4:35
add comment

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.