zamieszczam na stronie galerię jquery jcarousel połączoną z Thickbox'em (adres skryptu http://sorgalla.com/jcarousel/). Mój problem jest taki, że mam do zamieszczenia 24 zdjęcia, widoczne są 4 zdjęcia naraz i z tym nie mam problemu, ale podczas otwarcia strony ładowane są wszystkie 24 -> chcę aby były załadowane jedynie 4 a podczas przejścia do kolejnej porcji następne 4 itd, ponieważ obecne ładowanie wszystkich zdjęć znacząco spowalnia mi stronę - czy ktoś mógłby udzielić mi rady czego poszukać, aby osiągnąć taki efekt jak napisałam?
Zamieszczam jeszcze fragment skryptu w którym ładowane są zdjęcia:
var mycarousel_itemList = [ {url: "/images/zdjecia/01_s.png", title: "fot1"}, ... ... {url: "/images/zdjecia/24_s.png", title: "fot24"} ]; var scroll = 4; function mycarousel_itemLoadCallback(carousel, state) { for (var i = carousel.first; i <= carousel.last; i++) { if (carousel.has(i)) { continue; } if (i > mycarousel_itemList.length) { break; } // Create an object from HTML var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i-1])).get(0); // Apply thickbox tb_init(item); carousel.add(i, item); } }; function mycarousel_getItemHTML(item) { var url_m = item.url.replace(/_s.png/g, '_m.jpg'); return '<a href="' + url_m + '" title="' + item.title + '" ><img src="' + item.url + '" width="194" height="343" border="0" alt="' + item.title + '" /></a>'; }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ size: mycarousel_itemList.length, scroll: 4, visible: 4, animation: 0, easing:'linear', size: 24, itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback} }); });