Today was my first time using Thickbox, and I’m pretty satisfied. It’s got all the features I was looking for, namely “pop-in” images, iframes and galleries.
I didn’t really like how you had to add a querystring for the Thickbox iframes (I would prefer to use the rel attribute), but it still works fine.
Gallery Images Not Working
I’ve been banging my head against the keyboard for hours trying to fix this one little bug with Thickbox. For some reason, when I used the Thickbox Image Gallery, I couldn’t get the image to appear at all!
The Thickbox Image Gallery is where you open up one image in a gallery and then you can click “next” and “previous” to see the other images in the gallery. Thickbox uses the “rel” attribute for this, but for some reason, adding the “rel” attribute completely breaks it. When you click on the image, it starts the loading image… but doesn’t go anywhere. It just sits there with the loading image displayed.
Thank you to Stuff by Sarah for finding the following fix:
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
Compressed Thickbox fix
I happened to have the compressed version, but was still able to find the Gallery fix myself. You can replace:
- Existing Thickbox (Broken) Code
- {E=$(“a[@1N=”+g+”]
to not include the @ sign in it:
- New Thickbox Code
- {E=$(“a[1N=”+g+”]
And that’s it. I was definitely glad to find a solution, I hope this helps you too.
Ashton Sanders
53 Comments
Sweet. Thank you.
You’re welcome. Glad it helped.
Thanks for clearing the trail for the rest of us!
A note: I think the broken and fixed code for the compressed version in your post are identical. Error?
Haha, Thanks Zach. Good catch.
You’re more than welcome.
Its the current release and its sad get stuck with this problem. Thanks to you!
Woot! Thanks, this saved me a LOT of time
Huge… thanks.
holy crap i love the internet.
One bloody @ was making me lose my mind.
Thanks a ton!
teh kiddies thank you too 🙂
Nice! Thank you so much!
<3 hero !
Thank you! I was sure I had the code correctly; thanks for the solution.
This issue seems to stem from using the newest version of jQuery. If you look at the thickbox website it is using jquery-1.1.3.1.pack.js.
Nice working on finding that @!
Thankyou!! thankyou!! thankyou!! I told my client it would be no problem to do and was beginning to get worried 🙂 Your the Best!!!!
Thanks very much, this saved alot of time! Appreciate your post. How did you figure it out? its always good to know what the cause is.
Great stuff! thanks so much for this assistance, we been struggling to find a solution for ages
My goodness.
I have been stressing out over this for weeks why my gallery worked at first, and stopped functioning when I insterted a textarea thickbox.
After almost losing sanity, I find that is just this small @ sign that has been pestering me.
Thanks a 100 times for this one, you saved my work.
I guess it’s not this specific day for nothing;
Merry Christmass!
Thank you so much – cannot thank you enough for printing this on your site. I’m doing this for a client and I thought I was going to have to start all over with another slide show.
Happy New Year!
Hope
Oh my, this is awesome! Thanks so much! I was pulling my hair out on this one and now you’ve resolved it!!
[…] Dank an die Jungs, die es rausgefunden […]
OMG … this stupid bug waste me hours … thank you so much for publishing!!
Thx alot man…. i owe u one!
THANKS!
Oh my, this is awesome! Thanks so much! I was pulling my hair out on this one and now you’ve resolved it!!
thanks a lot…
thanks very much! 🙂
thanks
Thank you, thank you, thank you!!!
Kudos and thank you!
thank you very much. My thickbox gallery can load the image now!!
THANKS MAN, i was searching for this!!!
Really greatfull!!!
Thanks…. It really helped me a lot.. I almost wasted a full day for fixing this little thing.. Next when I found this one accidentally oh.. god.. i am so much relieved.. once again thanks to Ashton Sanders
I was wondering what I may have typed wrong.
This fix really helps! MANY THANKS!
Thanks!! my thickbox gallery is now working fine.
Terrific. What a simple solution. Feels kind of funny to go in and tweak a compressed js script. And how odd that one @ would wreck my build. But thanks a lot!
Thank you! Such a relief to find your solution after many hours of trying different things!
You brilliantly spiffing man! Fixed every problem in my life! more or less…
Thanks A LOOOOT !!!!
Great, cant believe they haven’t updated js files yet. If you are using the compressed file change [code]{E=$(“a[@1N=”+g+”]”).36();[/code] to [code]{E=$(“a[1N=”+g+”]”).36();[/code]
Thanks a ton. If I were got the website before I didn’t waste my two days :(. Now it’s work fine. :). Thanks again.
Thanks…
[…] is really a triple Hat Tip (HT to my wife for dealing with this issue, HT to Websites in a Flash where the solution was found, HT to Stuff by Sarah where the original solution was found), but it […]
You fucking rock ! save my life
Nice fix dude.
Thanks! This works great. I was also frustrated after 1 hour of trying to make it work.
I think you should inform the creators of the plugin… I was 1 step away from going for another lightbox plugin..
Thanks!
Lovely Post Thank you Very much for your Solution….i have working with this for more than a hour..you saved my time and i have done this with in a second
I owe you a pint buddy…much love for saving my poor old brain…
Hello, Does anyone know how I can get a thickbox gallery to open as a full screen when using framed pages? I have managed to create the gallery which works well, but it only displays the larger images in the framed window it is is and nnot in a full screen mode. Can any one help please? Thanks, Lara
@Lara
Yikes, I don’t think that’s possible. Since javascript is run inside your , I don’t believe you can get it to go outside of it’s screen. It’s probably redundant, but I recommend not using frames… Good luck.
Hi there.
Removing the “@” in line 79 didnt do anything for me. I am using multiple thickbox galleries on one page using the “ref=” approach, all galleries should only display 3 unique images, but most of the time if you click on either one of the three thumbnails, a wrong image loads or none at all. The paths and file names all correspond. Anything I am missing?
The issue can be seen here:
http://www.antiquesafrica.co.za/products.html
I really appreciate any help
You’re having a redirect problem with your server. The JQuery Thickbox is working fine.
If you go to the image link (outside of JQuery), it will redirect to the incorrect image. You need to fix your image links from redirecting.
@Ashton Sanders…you are a god amongst men. Thank you so much for the fast response. Fixed the issue and its working now. Thank you so much!!!
@Helge: Haha. Thanks. My pleasure.
Nice one, Ashton! Thank you 🙂