jCarousel
Hejsa,Er der nogle af jer, der har prøvet at lege med jCarousel af Jan Sorgalla (http://sorgalla.com/jcarousel/)?
Af en eller anden mærkelig årsag kan jeg ikke få scriptet til at virke. Der meldes ingen fejl og jeg har holdt mig tæt op af udviklerens egen opsætning.
// java script:
//========================================================
var btnAdvance = 1;
var productcontroller_itemList = [
{url: "/media/100/test.png",
imghref: "/projekter/test.aspx"},
{url: "/media/286/test2.png",
imghref: "/projekter/test2.aspx"},
{url: "/media/228/test3.png",
imghref: "/projekter/test3.aspx"},
];
function productcontroller_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('#next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#prev').bind('click', function() {
carousel.prev();
return false;
});
$('.jcarousel-next, .jcarousel-prev').click(function(){
btnAdvance = 1;
});
};
function productcontroller_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > productcontroller_itemList.length) {
break;
}
// Create an object from HTML
var item = jQuery(productcontroller_getItemHTML(productcontroller_itemList[i-1])).get(0);
// Apply thickbox
tb_init(item);
carousel.add(i, item);
}
};
function productcontroller_getItemHTML(item)
{
return '<a href="' + item.imghref + '?KeepThis=true&TB_iframe=true&height=250&width=850&inlineId=thickboxcontent" title="" class="thickbox"><img src="' + item.url + '" border="0" width="155" height="155" alt="" /></a>';
};
jQuery(document).ready(function() {
jQuery("#productcontroller").jcarousel({
vertical: true,
start: 1,
scroll: 1,
size: productcontroller_itemList.length,
buttonNextHTML: null,
buttonPrevHTML: null,
itemLoadCallback: {onBeforeAnimation: productcontroller_itemLoadCallback},
initCallback: productcontroller_initCallback
})
});
Kode genereret af jQuery:
<div class=" jcarousel-skin-tango"><div style="display: block;" id="productcontroller" class="jcarousel-container jcarousel-container-vertical">
<div class="jcarousel-clip jcarousel-clip-vertical"><ul style="height: 990px; top: 0px;" class="jcarousel-list jcarousel-list-vertical"><li jcarouselindex="1" class="jcarousel-item jcarousel-item-vertical jcarousel-item-1 jcarousel-item-1-vertical"><a href="/projekter/test.aspx?KeepThis=true&TB_iframe=true&height=250&width=850&inlineId=thickboxcontent" title="" class="thickbox"><img src="/media/100/test.png" alt="" border="0" width="155" height="155"></a></li><li jcarouselindex="2" class="jcarousel-item jcarousel-item-vertical jcarousel-item-2 jcarousel-item-2-vertical"><a href="/projekter/test2.aspx?KeepThis=true&TB_iframe=true&height=250&width=850&inlineId=thickboxcontent" title="" class="thickbox"><img src="/media/286/test2.png" alt="" border="0" width="155" height="155"></a></li><li jcarouselindex="3" class="jcarousel-item jcarousel-item-vertical jcarousel-item-3 jcarousel-item-3-vertical"><a href="/projekter/test3.aspx?KeepThis=true&TB_iframe=true&height=250&width=850&inlineId=thickboxcontent" title="" class="thickbox"><img src="/media/228/test3_scroller.png" alt="" border="0" width="155" height="155"></a></li>
</ul></div>
</div></div>
<a href="#" id="next"><img src="images/down.png" alt="ned" title="ned" style="border: 0pt none ;"></a>
<a href="#" id="prev"><img src="images/up.png" alt="op" title="op" style="border: 0pt none ;"></a>
</div>
