Pretty simple problem. I wanted to use the jCarousel plugin for jQuery to have a scrolling list of items, using the ‘circular’ wrap, where you never reach an end. See: circular carousel, but I also wanted to use Thickbox, so that if someone clicks on the image, it opens up a modal window with more information. Carousel already comes with an example that uses thickbox, but it’s not for the circular carousel, just the linear one. See: jCarousel with Thickbox 3. Since the code here is different, applying tb_init(item) doesn’t work.
I scoured the internet, and got extremely discouraged as all threads on this topic either end with someone saying “Forget it, I just gave up” or the dreaded no response. So, like all big problems, I slept on it and awoke with a brilliant and obvious solution: force it.
Assuming you’re already familar with the methods of Thickbox, take yourself to the jCarousel function mycarousel_getItemHTML. Within this is the code where you would expect to add class=”thickbox” on the a tag and get the magic results. This won’t work.  Instead of having this:
return '<a href="#TB_inline?height=155&width=300&inlineId=
hiddenModalContent" title="' + item.title + '">
<img src="' + item.url + '" width="75" height="75" border="0"
alt="' + item.title + '" /></a>';
I put in a force call to the Thickbox function that intiates the window onclick:
return ‘<a href=”#” onclick=”tb_show(‘‘ + item.title + ‘‘, ‘#TB_inline?height=155&width=300&inlineId=hiddenModalContent’,’false’); return false;“><img src=”‘ + item.url + ‘” border=”0″ alt=”‘ + item.title + ‘” width=”75″ height=”75″ /></a>’;
Let’s break that down:
tb_show
Thickbox function that opens a modal window, takes 3 arguments
'" + item.title + "'
Here we assign the first argument to be the title tag you assigned in mycarousel_itemList
This will also be what shows as the title in your thickbox window
'#TB_inline?height=650&width=600&inlineId=contentid'
We’ve taken the normal href code from the a tag and stuck it into the second argument of the tb_show call instead! This simply works the same way as putting it in the href does, it just skips a few steps.
false
Not sure, but just make it false :)
return false;
I’ve added this in to make sure the browser doesn’t try to go to your blank link, now that the href is empty. returning false; will keep the browser where it is and enable your viewers to see your modal window.
