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:

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

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.

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.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *