var mycarousel_itemList = [ {url: '/uploadedFiles/File/productsAutos_Image_1393531160_tn.JPG', link: '/uploadedFiles/File/productsAutos_Image_1393531159.JPG', title: 'a'},{url: '/uploadedFiles/File/productsAutos_Image_1393531178_tn.JPG', link: '/uploadedFiles/File/productsAutos_Image_1393531178.JPG', title: 'B'},{url: '/uploadedFiles/File/productsAutos_Image_1393531197_tn.JPG', link: '/uploadedFiles/File/productsAutos_Image_1393531196.JPG', title: 'C'},{url: '/uploadedFiles/File/productsAutos_Image_1393531216_tn.JPG', link: '/uploadedFiles/File/productsAutos_Image_1393531215.JPG', title: 'D'},{url: '/uploadedFiles/File/productsAutos_Image_1393531246_tn.JPG', link: '/uploadedFiles/File/productsAutos_Image_1393531245.JPG', title: 'E'}]; 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) { return '' + item.title + ''; }; jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap: 'circular', itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback} }); showImage("/uploadedFiles/File/productsAutos_Image_1393531159.JPG"); }); /* To Put The Image In */ function showImage(src) { $("#loader").addClass("loading"); $("#loader img").fadeOut("slow").remove(); var img = new Image(); $(img).load(function () { $(this).hide(); $('#loader').removeClass('loading').append(this); $(this).fadeIn("slow"); }).error(function () { // notify the user that the image could not be loaded }).attr('src', src); }