Any good lightbox-like option that works in WP 3.2.1?

by

Here is my code for using thickbox in my themes. It works on all the ones I build. I’ve tried several ways suggested on other sites, but none worked for me. Try the script out, if it doesn’t work, you probably have a plugin or another script in your theme that’s doing it wrong.

Here’s the code:

<?php
    function add_themescript(){
     if(!is_admin()){
     wp_enqueue_script('thickbox',null,array('jquery'));
     wp_enqueue_style('thickbox.css', "https://wordpress.stackexchange.com/".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="https://wordpress.stackexchange.com/questions/34082/([^"]*.)'.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');
?>

You’ll need to make sure your images are placed using the settings: Image Links to- File URL. You don’t need to add the rel=”thicbox” since the code does that for you. If you want to style the look of the thickbox window, just remove:

 wp_enqueue_style('thickbox.css', "https://wordpress.stackexchange.com/".WPINC.'/js/thickbox/thickbox.css', null, '1.0');

You can then enqueue your own style from your theme file like this:

  wp_enqueue_style('my-custom-style',get_bloginfo('template_url').'/customThickbox.css',false,'1.1','all');

Just add it in the place of the one you removed. Copy the thickbox stylesheet included with WordPress into the theme folder and change it as you wish.

Leave a Comment