I've recently been finishing off a site where I needed a lightbox to simplify showing several photos for each product. I've used Thickbox in the past, as it comes with WordPress by default, however this is a custom built site. I already had the latest version of jQuery running for other functions on the site, so just needed to grab a copy of thickbox, upload that, add the necessary code and that should be that.

3 hours of going around in circles later… and still no joy! After checking over my code piece by piece, trying the code out of WordPress, trying the page on another server just in case, and trying every other option I could think of, I finally tried uploading jQuery 1.2.6 from my WordPress 2.7 folder on my computer, and hey presto, it all worked!

It seems that there is a minor change required for thickbox to work with the latest jQuery version. After a bit of searching around I found out that what's needed is on line 79 of the existing thickbox file you need to change the line

Existing Thickbox Code
  1. TB_TempArray = $("a[@rel="+imageGroup+"]").get();

to not include the @ sign in it ie.

New Thickbox Code
  1. TB_TempArray = $("a[rel="+imageGroup+"]").get();

Such a simple change that caused a few hours of frustration! So hopefully it may be of use to someone else :)

Trackback URL for this post: http://www.stuffbysarah.net/2009/02/16/thickbox-and-jquery-131/trackback/
  • Jessica Comments:

    Thank you so so much! I've been struggling with this issue for some time now…

  • Adam Rivera Comments:

    Saved me hours of digging. Thanks.

  • Glen Comments:

    This is so insanely USEFUL! I really, really, really appreciate your posting this solution! Thank you! Thank you! Thank you!!!! I'd keep typing, but my hands are getting tired!

  • Mark Comments:

    Thanks.

  • stef Comments:

    THANK YOU!!!

  • Elio Comments:

    Thank You!!
    I'm Italian….. Grazie!!!

  • Simon Comments:

    Damn I love you ! It took me hours and I didn't understand what was going on !
    Thanks !

  • xkliber Comments:

    Thanks Sarah!

    I've noticed that some months ago but doesn't have time to search why!

    You've jsut save our time, it's great!
    Good Job, really! :d

  • Ashton Sanders Comments:

    I'm going to cry! I can't believe how difficult that was. Thank you for the simple solution.

    BTW, if you have the Compressed version, replace:

    {E=$("a[@1N="+g+"]"

    with

    {E=$("a[1N="+g+"]"

    Enjoy

  • Pingback: JQuery ThickBox Gallery Images Not Working | Website Designers and Webmasters

  • Werner Comments:

    Thanks a lot, saved me some time!

  • Jeff Comments:

    Add me to the pile of thank yous :)

  • Rem Comments:

    It worked indeed, thank you!

  • yihfeng Comments:

    I assume that people have tested the fix supplied by Sarah to work with IE?

    My IE thickbox links are still dead :(

    • Sarah Comments:

      @yihfeng – I checked my changes in Internet Explorer yes, so not sure why yours are not working. If you're still having problems can I suggest maybe taking the thickbox.js file from a WordPress install which has been updated and should work fine. You may just need to update the paths at the top of the file.

      To everyone else, you're welcome :)

  • Wim Comments:

    Another BIG thank you!

  • yihfeng Comments:

    @Sarah:

    Thanks for the reply. I believe it wasn't working for me because I was in IE quirks mode:

    http://css-class.com/test/css/.....opera4.htm

    "A comment before the doctype triggers quirksmode in IE7"

    But it seems to work now :)

    Cheers.

  • Arnau Comments:

    thank you very muchhhh!!!!!!!!!!!! I spend so many hours trying to solve this!!!!!!!!!!!1 thank youuuuuuuuuuuuuuuuuu

  • BacH Comments:

    Thanks for the fix!

    If you're using the minified version, as I am, search for:
    E=$("a[@1N="+g+"]")
    and remove the @ to get
    E=$("a[1N="+g+"]")

    That solved the problem for me.

    [edit] Looks like somebody already posted this. Sorry for the duplicate :) [/edit]

  • bubba Comments:

    Thanks for this!

    :)

  • Bilbothecat Comments:

    Thickbox is designed by Cody Lindley. Cody is one of the developers of jQuery. I think giving him grief over a redundant '@' sign is a tad petty. I would much rather him spend his time continuing the development of jQuery or anything that makes a nasty script for the lazy, more palatable to all.

    • Sarah Comments:

      All I did was post up the fix for others to use if they hit the same problem. I've re-read my comments on this and whilst I did mention it was a quick fix to make, I've also pretty much defended Cody's position on not making the update as I know what it's like to be busy and not have the time to support free, non profit making work. I get plenty of hassle and demands to make fixes to the free WP plugins I've made which I'm never overly happy about as they're maintained in my free time for free.

      So I'm sorry if you feel that this post is purely here to give Cody grief but it isn't, it's here to help other people out and nothing more.

  • jyoseph Comments:

    Many thanks for this. I'd been abandoning thickbox for client projects until today, I ran into a client that didn't want to switch. That left me searching for a solution, that's how I found this great info. So, thanks for putting it out there!

  • AtReyU_101 Comments:

    Thank you so much … this was frustrating me endlessly.

  • Onur De?erli Comments:

    thanks very much. this is a great trick

  • Shawn Comments:

    Thanks so much for this! It solved a nasty production bug!

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    Latest Tweets