Howto use WP built in Thickbox for images?

Question

Howto use WP built in Thickbox for images?

Jeremy Jared

2016年8月17日 19:52

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.

Topic thickbox images Wordpress javascript

Category Web

Tom Auger · Accepted Answer · 2016年8月17日 19:52

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' );
    }
}

zac · Accepted Answer · 2015年7月26日 03:49

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");
         });

Howto use WP built in Thickbox for images?

1: Enqueue thickbox JS and CSS

2: Activate Thickbox on WordPress Gallery Images

3: Create your gallery

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

About