Thickbox and jQuery 1.3.1
Mon, 16 February, 2009 – 8:00 am
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
-
- TB_TempArray = $("a[@rel="+imageGroup+"]").get();
to not include the @ sign in it ie.
- New Thickbox Code
-
- 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 
It's clever stuff and clever stuff means complicated code with increased chances of things breaking and not working on different browsers. I'd like to see a usability study on whether people like this style of mini windows popping up inside their main browser window.
By Chris Kent on Mon, 16 February, 2009
Well, the problem here is/was just that thickbox hadn't been upgraded to work with the latest version of jQuery. jQuery supports all the latest browsers and some earlier ones too. I don't think thickbox has been updated for quite a while, possibly because the creator doesn't have the time. As for a usability study, it's perfectly fine from a usability point of view. Whether people like it or not is not usability but just personal preference. I think that a simple lightbox is an effective way of displaying a gallery of images. It's clean, quick and saves on having to create another page to display the image.
By Sarah on Wed, 18 February, 2009
Hey, thanks a lot! I had the same problem and was searching for an hour now.
By Eric on Thu, 19 February, 2009
I know the feeling! I lost about half a day on it, knowing I could use something else but frustrated and confused as to why this simple script wasn't working!
By Sarah on Wed, 25 February, 2009
Thank you so much for this. Saved me the pain of trying to figure out what was wrong!
By Sam on Wed, 4 March, 2009
Woww.. Thank you very much. I have a same problem here. It's saved me hours to find the problem.
By Frederick Lasmana on Thu, 5 March, 2009
No problem both. Glad I saved someone some time!
By Sarah on Thu, 5 March, 2009
Thanks for the info.
The original site mentions that this script is working with Jquery 1.3.1.x but i spent a good part of the day trying to see why the gallery is not working.
I tried to email the guy but the contact page was very snide.
contact [guess what goes in here]@lidnyl.com (or whatever lindly is spelled).
well i cant guess what goes in there so if someone does guess it, mail it to the guy and tell him to fix his script up. it takes 10seconds and will help others who encounter this same issue.
Thanks
AlexD
By AlexD on Mon, 9 March, 2009
Hi Alex, I think Thickbox says it works with jQuery 1.1.3 not 1.3.1. It's a shame they don't make the one second fix! But I know how it feels to be busy and just not get the chance to make minor changes to what is essentially a free script.
By Sarah on Thu, 12 March, 2009
Thanks for posting this. It probably saved me my sanity and hours of work.
By m00min on Fri, 13 March, 2009
OMG thanks for posting !!! I can't believe that I spent hours trying to find the problem. You are a saviour !! thanks again.
By Bob Johns on Sat, 28 March, 2009
I have created a fork of the thickbox plugin to improve upon it and fix a number of its issues. The new version can be found on my web site.
By Byrne Reese on Mon, 4 May, 2009
Cheers for letting us know!
By Sarah on Mon, 4 May, 2009
Thanks for the tip; someone really should fork TB and track it with Google Code; I personally find some essential features lacking (autoresize, zoomin etc)…
By rosamez on Sun, 10 May, 2009
Finally I found the answer to the latest jquery and thickbox compatibility issue.
I've been wondering if anyone would've found a fix.
Thanks a bunch.
By Danny Foo on Tue, 12 May, 2009
Very awesome! Great find – and thanks for the help
By Anthony on Wed, 13 May, 2009
THANK YOU SOOOOOO MUCH !
I was searching for 2 days the solution for this problem !!!!
By Brigitte on Thu, 14 May, 2009
Thank you thank you thank you
Someone should realy point this out to the developer
By Nik on Thu, 21 May, 2009
Thanks mate, you just saved me a lot of troubles. Cheers!
By wojtek on Fri, 22 May, 2009
Gosh, who would have thought there to be an error in the thickbox code??
After 3 hours of work, this was the fix we needed. This seems to apply to the latest version of jquery (1.3.2) and thickbox, and the bug occurs when displaying the images as a gallery (using the "rel" attribute).
I've sent a quick email out to Cody Lindly, hope it helps.
Thanks again
By Tison on Tue, 26 May, 2009
Hi all, glad to be of help although I'm just further reporting the fix after I found it! In regards to the thickbox developer, I think they're just too busy to maintain the plugin, which I can appreciate as I know how that feels!
By Sarah on Tue, 26 May, 2009
Many thanks. I had the same problem. It works now!
By George on Wed, 27 May, 2009
Brilliant ..! I hope your page show up on Google for a search for Thickbox…will save other like me a LOT of time. Thanks.
By Alston on Fri, 29 May, 2009
Thanks Sarah, that was driving me nuts!
By Laura on Tue, 2 June, 2009
yeah this caught me out too. Its the same story with older versions of the jquery inline validator. Thanks for sharing!
By theodin on Thu, 4 June, 2009
Thanks for this info. I use the compressed version of the thickbox. There is only one "@" in the compressed code, so I tried to remove it — and it works!
Thank you!
By Mike Basteln on Thu, 11 June, 2009
You saved my day!
Thanks a lot.
By Exventri on Fri, 12 June, 2009
I wished I had searched earlier – I never would have found that! Thanks a lot!!!
By Elke on Fri, 12 June, 2009
T H A N K S!!!
By claudio on Fri, 26 June, 2009
Thank you so so much! I've been struggling with this issue for some time now…
By Jessica on Mon, 29 June, 2009
Saved me hours of digging. Thanks.
By Adam Rivera on Wed, 1 July, 2009
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!
By Glen on Thu, 2 July, 2009
Thanks.
By Mark on Thu, 2 July, 2009
THANK YOU!!!
By stef on Mon, 13 July, 2009
Thank You!!
I'm Italian….. Grazie!!!
By Elio on Tue, 21 July, 2009
Damn I love you ! It took me hours and I didn't understand what was going on !
Thanks !
By Simon on Tue, 21 July, 2009
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
By xkliber on Wed, 22 July, 2009
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
By Ashton Sanders on Fri, 24 July, 2009
Thanks a lot, saved me some time!
By Werner on Wed, 29 July, 2009
Add me to the pile of thank yous
By Jeff on Sun, 2 August, 2009
It worked indeed, thank you!
By Rem on Thu, 6 August, 2009
I assume that people have tested the fix supplied by Sarah to work with IE?
My IE thickbox links are still dead
By yihfeng on Mon, 17 August, 2009
Another BIG thank you!
By Wim on Wed, 19 August, 2009
@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
By Sarah on Fri, 21 August, 2009
@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.
By yihfeng on Mon, 24 August, 2009
thank you very muchhhh!!!!!!!!!!!! I spend so many hours trying to solve this!!!!!!!!!!!1 thank youuuuuuuuuuuuuuuuuu
By Arnau on Tue, 25 August, 2009
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]
By BacH on Wed, 2 September, 2009
Thanks for this!
By bubba on Sun, 13 September, 2009
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.
By Bilbothecat on Mon, 14 September, 2009
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.
By Sarah on Mon, 14 September, 2009
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!
By jyoseph on Thu, 8 October, 2009
Thanks sharing!
By Micahe Shaw on Mon, 12 October, 2009
Thank you so much … this was frustrating me endlessly.
By AtReyU_101 on Mon, 26 October, 2009
thanks very much. this is a great trick
By Onur De?erli on Wed, 28 October, 2009
Thanks so much for this! It solved a nasty production bug!
By Shawn on Wed, 28 October, 2009
Thanks this saved my couple hours?
By Sarfaraz Soomro on Wed, 18 November, 2009
thanks Sarah! much appreciated!
By Elemental - South Africa Web Development on Tue, 15 December, 2009
this is awesome! so glad i found your fix. THANK YOU SO MUCH for posting!!!!!!!!
By laura on Sat, 9 January, 2010
Thanks a lot. Half a day lost, but another half saved…
By Molotok on Wed, 3 February, 2010
Awesome! You helped me alot with this tiny change :3
By Keenora on Mon, 22 February, 2010
thank you so much! i've been looking everywhere for a solution! so so simple!
By julie on Thu, 25 February, 2010