Ikool’s Blogbed

Compatibility issue of Thickbox and jQuery in WordPress when both NextGen Gallery and WP e-commerce present

Both jQuery and Thickbox have different versions, and WordPress and its plugins may use different versions of jQuery for different plugins since plugin engineers basically work on their parts without paying much attentions to others’. I checked my installation of WordPress 2.5.1 and it has jQuery 1.2.3 and Thickbox 3.1. However, when you install other plugins which might use a fairly new jQuery such as 1.2.4, what happens in this case is they conflict, some of the features may not work at all, such as Fix of issues with old version of jQuery in WordPress 2.5.1 when using FeedWordPress. In the case of having both NextGen Gallery and WP e-commerc, you may even see what I saw as depicted in this image. The problem gets even worse when the plugins are using Thickbox because different versions of Thickbox will only work perfectly with their corresponding versions of jQuery:

This image is after I clicked one of the products from the Products page. Note there are 2 images in the Thickbox popup window, this is really weird, the second one is a duplicate. When checking html source of the page, there are 2 Thickbox.js included and both are different versions, therefore, Thickbox is initialized twice when the page is loaded. The odd thing is you don’t always get these 2 images on the same page.

The fix for this is not so easy, I thought I could apply the same principal like what I did in the previous article to fix it, however it didn’t work. Now I am stuck here and going to spend more time to find out a solution for this.
I hope all these insights could help others find a good solution. By the way, I also notice that other softwares such as Pligg have the same compatibility issue Pligg Forum post
I hope someone else can help me on this, please let me know if you have any suggestion. I’d really appreciate it.

Advertisements

June 14, 2008 - Posted by | Wordpress Plugins, Wordpress Tips, WP E-Commerce | , , , , , , , ,

9 Comments »

  1. Hey did you ever get this to work? I’d love to know how coz its really annoying me right now

    Comment by Andy | July 1, 2008 | Reply

  2. In “thickbox.js”, go to line #132 and change:
    $(“#TB_window”).append(…
    to
    $(“#TB_window”).html(…

    Comment by Mario | September 3, 2008 | Reply

  3. Any solution to the conflict with WP ecommerce & NextGen Gallery? I’m dying to know how to solve this. 🙂

    Comment by LJ | October 21, 2008 | Reply

  4. I’ve just encountered this one. Man it’s a head wreck. I really wanted to use Thickbox on the front end of the site and it’s going totally bonkers!

    Comment by Alex Leonard | January 8, 2009 | Reply

  5. I followed this advice from another post…
    ———————————————–

    If you want a quick and dirty fix for this problem,open wp-shopping-cart in your plugins folder,open /js and delete the content of thickbox.js. Then find thickbox.css and lightbox.css in /plugins/wp-shopping-cart/ and repeat,leaving the files on the server.I say leave them there in case you ever deactivate nextgen so you can just refill those files and you won’t forget what goes where if they remain where they are,just empty.
    Wp-shopping-cart uses other javascript like jquery for the fancy effects like the sliding cart and etc but doesn’t need those 3 files for anything(as far as i can tell so far) except for the thumb lightbox effect.
    Yet nextgen gallery really needs those 3 files or it’s whole deal is wiped out.
    So I just let the scripts from the nextgen plugin provide the lightbox effect for both plugins.
    This saved me loads of time and both plugins are 100% fine.

    Comment by Theresa | January 23, 2009 | Reply

  6. i am having a problem with Mac platforms: i have the free version of WP E-Commerce installed. Everything looks good so far! However, when i view the shop on a mac computer the pop up window for the product image thumbnail doesn’t show up at all….does anyone else have this problem? where do i start looking for the code to fix?

    Comment by Aunt Bucky | April 7, 2009 | Reply

  7. $(”#TB_window”).append(…
    to
    $(”#TB_window”).html(…

    works great

    Comment by z | April 27, 2009 | Reply

  8. same issue here…let me know if you figure this out.

    Comment by Dustin | June 17, 2009 | Reply

  9. Theresa,

    Commenting out, or renaming all thickbox files did the trick for me – thank you so much.
    Ti

    Comment by Tison | June 25, 2009 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: