Using jQuery Carousel with Thickbox
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 :)
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.