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

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

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

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