Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

JQuery ThickBox Gallery Images Not Working

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
  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 :)

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
  1. {E=$(“a[@1N="+g+"]

to not include the @ sign in it:

New Thickbox Code
  1. {E=$(“a[1N="+g+"]

And that’s it. I was definitely glad to find a solution, I hope this helps you too.

Ashton Sanders

Tags: , , , , ,

53 Comments »

  1. Sweet. Thank you.

    Comment by Michael Hessling — August 10, 2009 @ 2:56 pm

  2. You’re welcome. Glad it helped.

    Comment by Ashton Sanders — August 10, 2009 @ 3:31 pm

  3. 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?

    Comment by Zachary Williams — August 19, 2009 @ 2:35 pm

  4. Haha, Thanks Zach. Good catch.

    You’re more than welcome.

    Comment by Ashton Sanders — August 19, 2009 @ 4:46 pm

  5. Its the current release and its sad get stuck with this problem. Thanks to you!

    Comment by Marvin — August 26, 2009 @ 1:15 am

  6. Woot! Thanks, this saved me a LOT of time

    Comment by BM5k — August 27, 2009 @ 2:36 am

  7. Huge… thanks.

    Comment by ATLPHP — September 4, 2009 @ 12:13 pm

  8. holy crap i love the internet.

    One bloody @ was making me lose my mind.

    Thanks a ton!

    teh kiddies thank you too :)

    Comment by Casey Driscoll — September 7, 2009 @ 4:43 pm

  9. Nice! Thank you so much!

    Comment by Justin — September 9, 2009 @ 2:03 pm

  10. <3 hero !

    Comment by romenov — October 2, 2009 @ 4:19 am

  11. Thank you! I was sure I had the code correctly; thanks for the solution.

    Comment by Kevin — October 8, 2009 @ 12:31 pm

  12. 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 @!

    Comment by justin — October 8, 2009 @ 4:53 pm

  13. Thankyou!! thankyou!! thankyou!! I told my client it would be no problem to do and was beginning to get worried :) Your the Best!!!!

    Comment by lukdvr — December 9, 2009 @ 3:32 pm

  14. 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.

    Comment by Elemental - South Africa Web Development — December 15, 2009 @ 4:12 am

  15. Great stuff! thanks so much for this assistance, we been struggling to find a solution for ages

    Comment by Wapit Mobile Search Engine — December 15, 2009 @ 4:13 am

  16. 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!

    Comment by Kris — December 25, 2009 @ 5:22 am

  17. 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

    Comment by Hope — December 29, 2009 @ 12:29 pm

  18. Oh my, this is awesome! Thanks so much! I was pulling my hair out on this one and now you’ve resolved it!!

    Comment by Ian Pitts — January 7, 2010 @ 9:58 am

  19. [...] Dank an die Jungs, die es rausgefunden [...]

    Pingback by Silberlinge – Das Docdata-Blog » jQuery Thickbox: Galerie-Bilder laden nicht — February 8, 2010 @ 10:47 am

  20. OMG … this stupid bug waste me hours … thank you so much for publishing!!

    Comment by Rosch — February 14, 2010 @ 6:07 pm

  21. Thx alot man…. i owe u one!

    Comment by Bob — March 5, 2010 @ 6:50 am

  22. THANKS!

    Comment by Dustin — March 24, 2010 @ 10:35 am

  23. Oh my, this is awesome! Thanks so much! I was pulling my hair out on this one and now you’ve resolved it!!

    Comment by Bruce — May 19, 2010 @ 9:49 am

  24. thanks a lot…

    Comment by makkal — July 26, 2010 @ 2:48 pm

  25. thanks very much! :)

    Comment by deathless — August 10, 2010 @ 5:11 am

  26. thanks

    Comment by petrusek — January 4, 2011 @ 2:50 pm

  27. Thank you, thank you, thank you!!!

    Comment by Erik — February 1, 2011 @ 4:03 pm

  28. Kudos and thank you!

    Comment by Andrew — February 9, 2011 @ 2:36 pm

  29. thank you very much. My thickbox gallery can load the image now!!

    Comment by Annie — March 9, 2011 @ 2:07 am

  30. THANKS MAN, i was searching for this!!!
    Really greatfull!!!

    Comment by Wallysson Nunes — March 16, 2011 @ 7:57 pm

  31. 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

    Comment by rajeesh — March 20, 2011 @ 11:28 pm

  32. I was wondering what I may have typed wrong.
    This fix really helps! MANY THANKS!

    Comment by xshadow — March 28, 2011 @ 9:03 pm

  33. Thanks!! my thickbox gallery is now working fine.

    Comment by Abhijit Aitwade — April 13, 2011 @ 5:40 am

  34. 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!

    Comment by Ross Heintzkill — April 22, 2011 @ 5:08 pm

  35. Thank you! Such a relief to find your solution after many hours of trying different things!

    Comment by Natalya — May 4, 2011 @ 8:52 am

  36. You brilliantly spiffing man! Fixed every problem in my life! more or less…

    Comment by Jordan — May 12, 2011 @ 7:10 am

  37. Thanks A LOOOOT !!!!

    Comment by Julie — June 6, 2011 @ 3:43 am

  38. 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]

    Comment by James — June 13, 2011 @ 4:44 pm

  39. Thanks a ton. If I were got the website before I didn’t waste my two days :(. Now it’s work fine. :). Thanks again.

    Comment by vijay — June 15, 2011 @ 4:15 am

  40. Thanks…

    Comment by Parminder — June 24, 2011 @ 6:05 am

  41. [...] 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 [...]

    Pingback by Fixed: Thickbox not working with multiple images « Sup-a-Dillie-O — August 22, 2011 @ 4:21 pm

  42. You fucking rock ! save my life

    Comment by Deacon Frost — August 25, 2011 @ 1:52 pm

  43. Nice fix dude.

    Comment by pokeybit — September 8, 2011 @ 3:19 am

  44. 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!

    Comment by Fred — October 25, 2011 @ 2:33 am

  45. 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

    Comment by Velaiah — November 18, 2011 @ 6:05 am

  46. I owe you a pint buddy…much love for saving my poor old brain…

    Comment by OldBeno — February 6, 2012 @ 4:15 pm

  47. 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

    Comment by Lara — June 13, 2012 @ 1:53 pm

  48. @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.

    Comment by Ashton Sanders — June 13, 2012 @ 5:48 pm

  49. 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

    Comment by Helge — June 24, 2012 @ 2:54 pm

  50. 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.

    Comment by Ashton Sanders — June 24, 2012 @ 2:59 pm

  51. @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!!!

    Comment by Helge — June 24, 2012 @ 3:25 pm

  52. @Helge: Haha. Thanks. My pleasure.

    Comment by Ashton Sanders — June 24, 2012 @ 4:37 pm

  53. Nice one, Ashton! Thank you :)

    Comment by Ilian — April 4, 2013 @ 9:11 am

RSS feed for comments on this post. TrackBack URL

Leave a comment