[JS] Circular jCarousel + Thickbox

Hello,

I've tried multiple methods to get thickbox working with jCarousel. Normally jCarousel works with thickbox as long the warp functions stays undefined.

You can view the source code on this page: www.osb2000.nl

        // Set thickbox loading image
        tb_pathToImage = "http://www.osb2000.nl/wp-content/themes/osb/img/loading-thickbox.gif";
         
         
        var mycarousel_itemList = [
       {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-684.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-680.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-290.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-296.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-297.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-299.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-313.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-314.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-330.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-346.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-359.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-360.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-372.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-377.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-378.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-382.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-386.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-401.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-405.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-412.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-419.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-444.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-463.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-464.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-469.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-481.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-486.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-490.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-495.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-504.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-526.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-569.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-575.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-603.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-639.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-650.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-673.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-292.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-293.jpg", title: ""},  
        ];
         
	function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
	{
	    // The index() method calculates the index from a
	    // given index who is out of the actual item range.
	    var idx = carousel.index(i, mycarousel_itemList.length);
	    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
	};
	
	function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
	{
	    carousel.remove(i);
	};
	
	/**
	 * Item html creation helper.
	 */
	function mycarousel_getItemHTML(item)
	{
	    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
	    return '<a href="' + url_m + '" onclick="tb_show(' + item.title + ', \'#TB_inline?height=800&amp;width=600&amp;inlineId=hiddenModalContent\', \'false\');return false"><img src="' + item.url + '" border="0" alt="' + item.title + '" width="96" height="75" /></a>';

	};
	
	jQuery(document).ready(function() {
	    $('#mycarousel').jcarousel({
	        wrap: 'circular',
		visible: 9,
	        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
	       	itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
	});
});

Code (markup):

I've now tried to add the thickbox the hardcode way, but that does not seems to do the trick.