I really like Lightbox or Thickbox, which I use since I switched to jQuery. I think that the way it abstract every distracting elements of the page to focus on the subject is just great. Also, the design process of a web gallery gallery is also somewhat painful because you can't really show very large image without cluttering your design. Seems it makes everybody's life easier, except those who use Google Analytics because items showed within a modal window system does not generate hits.

Happy I was, when I realized that I would not have to reverse engineer Google's ga.js to hack in fake hits because they provide a neat and well documented API.

The first thing I did was to get and edit the Thickbox source file because it didn't support custom callback functions. I could have done it in a less dirty way, but it turns out I found most of Thickbox's code quite dirty so I didn't feel that bad. But hey, it works and I had to add only two lines in a function.

//function called when the user clicks on a thickbox link
function tb_show(caption, url, imageGroup) {

  if (typeof tb_callback != 'undefined') {
  	tb_callback.apply(this, [caption, url, imageGroup]);}
  	
  // ...
}

Then I had to pollute my obsessively clean global namespace with the callback function, but Thickbox already messed it pretty good so it doesn't really matter now..

function tb_callback(caption, url, imageGroup) {
  if (typeof(pt) != 'undefined') {
    virtualURL = [
    	window.location.href.replace(window.location.href.match(/#.*$/),''),
    	'#tb:', escape(imageGroup), ',', escape(caption), ',', url
    ].join();
    pt._setAllowAnchor(true);
    pt._trackPageview(virtualURL);
  }
}

The pt._setAllowAnchor(true); with the anchor in the url are extras for another hack I've made for Thickbox, I could just have used the url parameter. I would have seen something like this in my Google Analytics:

/media/gallery/imagefile.jpg

I though I could take it one step further and add the gallery name and the caption using anchor and make two hits with one stone by allowing to permalink Thickbox items.

For that I need this JavaScript to be executed on document ready:

if (window.location.href.match(/\/\#tb\:/)) {
  tb = window.location.href.match(/\/\#tb\:(.*)/)[1].split(',')
  setTimeout(function(){
    tb_show(unescape(tb[1]), tb[2], unescape(tb[0]));}, 200); 
}

Now users can share links that points to a Thickbox item, the url is quite ugly but I've seen worst.

Note: to be honest this code is still untested because I have to wait until tomorrow to see if the anchor hack gets grabbed by Google Analytics (it's not live..), but it worked without it so I guess that if the API is right it should work. Will update on that.