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

Question

I'm having problems finding a "plugin" that will help me display some of my images in a nice way such as prettyPhoto, Lightbox etc. As I'm already using the jQuery library, I'd prefer a plugin that works with jQuery rather than Scriptaculous.

I tried to implement the newest version of prettyPhoto as well the the jQuery based Lightbox plugin (that hasn't been updated recently). Both seem to have several issues with Wordpress 3.2.1

Googling just showed me that others had similar problems, but I couldn't find a good answer or solution to this yet.

I'd prefer not to use another WP plugin and rather implement it myself, but before trying out all the options out there just to see that they won't work well with the newest WP version, I thought it might be a better idea to ask here.

Is here anybody using s.th. similar what I'm looking for successfully in the newest WP version?

Thanks a lot in advance.

Answer 1

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', '/'.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');
?>

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', '/'.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.