0

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.

5
  • 1
    Have you tried 'Thickbox' which is shipped with WordPress by default? Nov 18, 2011 at 9:01
  • 1
    I use Fancybox a lot.
    – Geert
    Nov 18, 2011 at 9:37
  • @Geert: I tried, but it doesn't work. I get the following Javascript error: d.onCleanup is not a function
    – japanworm
    Nov 18, 2011 at 12:13
  • Sounds more like you've got another script messing up your js. If you're talking about the front end of your site then its just html/css/javascript that is output by WordPress. WP has nothing to do with whether a script works on the frontend or not. Find out where the d.onCleanup error is coming from and temporarily disable that script.
    – patnz
    Nov 18, 2011 at 18:36
  • Thank you. That was very informative. I'll check it out one more time. It's at least good to know that WP doesn't have to do anything with this :)
    – japanworm
    Nov 20, 2011 at 5:07

1 Answer 1

4

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.

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.