Thickbox 3.0 Image Gallery - Duplication Fix

At work today we had an issue with Thickbox for jQuery displaying "Image 2 of 3" when it was actually "Image 1 of 3". Let me describe the scenario we had it set up in.

We had a thumbnail with a thickbox link on it with a hyperlink below it linking to the same image. So you could click either the thumbnail or the text to open that image. The problem was that Thickbox didn't recognize those same links as the same image, so it stored it twice and uses the image number of the last object stored in the array - so if you had 3 of the same links to one image, it would say "Image 3 of X" when you would click on the first image. I thought about it a little bit when I got home and within about 3.2234234 seconds, I figured it out.

Here is the fix for it. Open up thickbox.js or and go to line 79 where you will see

PLAIN TEXT

JAVASCRIPT:

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

Immediately after that add

PLAIN TEXT

JAVASCRIPT:

var TB_HrefArray = new Array();
var TB_ObjArray = new Array();

$("a[@rel="+imageGroup+"]").each(function(i){
if(jQuery.inArray(TB_TempArray[i].href,TB_HrefArray) == -1){
TB_ObjArray.push(TB_TempArray[i]);
TB_HrefArray.push(TB_TempArray[i].href);
}
});

TB_TempArray = TB_ObjArray;

Posted July 8, 2008