I have a page with one JCarousel on it. I need to be able to switch between different data sources for the single display carousel.
I have it almost working - however when I execute... it loops around to the default start state and doesn't keep the new data on display....it blinks past though. I really need some help. Here is the code; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en" > <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Cirle</title> <!-- JQUERY --> <script type="text/javascript" src="http://jquery.com/src/jquery- latest.js"></script> <script type="text/javascript" src="scripts/jquery.jcarousel.js"></ script> <link rel="stylesheet" type="text/css" href="css/ jquery.jcarousel.css"> <link type="text/css" rel="stylesheet" href="css/carousel.css" /> <script type="text/javascript"> var carousel1_itemList = [ {url: 'images/thumbs/caterpillar.jpg', title: 'The Very Hungry Caterpillar', Auth: 'Eric Carle', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/peppers.jpg', title: 'Sgt. Peppers Lonely Hearts Club Band', Auth: 'Beatles', formaturl:'images/formats/ musiconcd.gif', format:'CD'}, {url: 'images/thumbs/postal.jpg', title: 'Going Postal', Auth: 'Terry Pratchett', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/blank.jpg', title: 'Little Women', Auth: 'Louisa may Alcott', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/potter.jpg', title: 'Harry Potter', Auth: 'JK Rowling', formaturl:'images/formats/DVD.gif', format:'DVD'}, {url: 'images/thumbs/rivals.jpg', title: 'Team of Rivals', Auth: 'Doris Kearns Goodwin', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/rockband.jpg', title: 'Rock Band', Auth: 'Electronic Arts', formaturl:'images/formats/videogame.gif', format:'Video Game'}, {url: 'images/thumbs/stats.jpg', title: 'Business Stats', Auth: 'Leonard J Kazmier...', formaturl:'images/formats/book.gif', format:'book'}, ]; var carousel2_itemList = [ {url: 'images/thumbs/blank.jpg', title: '222 Little Women', Auth: 'Louisa may Alcott', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/potter.jpg', title: '222 Harry Potter', Auth: 'JK Rowling', formaturl:'images/formats/DVD.gif', format:'DVD'}, {url: 'images/thumbs/rivals.jpg', title: '222 Team of Rivals', Auth: 'Doris Kearns Goodwin', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/rockband.jpg', title: '222 Rock Band', Auth: 'Electronic Arts', formaturl:'images/formats/videogame.gif', format:'Video Game'}, {url: 'images/thumbs/stats.jpg', title: '222 Business Stats', Auth: 'Leonard J Kazmier...', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/caterpillar.jpg', title: '222 The Very Hungry Caterpillar', Auth: 'Eric Carle', formaturl:'images/formats/book.gif', format:'book'}, {url: 'images/thumbs/peppers.jpg', title: ' 222 Sgt. Peppers Lonely Hearts Club Band', Auth: 'Beatles', formaturl:'images/formats/ musiconcd.gif', format:'CD'}, {url: 'images/thumbs/postal.jpg', title: '222 Going Postal', Auth: 'Terry Pratchett', formaturl:'images/formats/book.gif', format:'book'}, ]; //var carousel_itemList; function carousel_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, carousel_itemList.length); carousel.add(i, carousel_getItemHTML(carousel_itemList[idx - 1])); }; function carousel_itemVisibleOutCallback(carousel, item, i, state, evt) { carousel.remove(i); }; /** * Item html creation helper. */ function carousel_getItemHTML(item) { return '<div class="relatedWork-item"><a href=""><img src="' + item.url + '" alt="' + item.title + '" /></a><h5 class="relatedWork- Title"><a href="">' + item.title + '</a></h5> <h5 class="relatedWork- Auth">by '+ item.Auth + '</h5> <h5 class="relatedWork-Form"><img src="' + item.formaturl + '"/>'+ item.format +'</h5> </div>'; }; function drawCarousel(source){ //alert(source); if (source == '1') { carousel_itemList = carousel1_itemList; } else carousel_itemList = carousel2_itemList; jQuery('#carousel1').jcarousel({ visible:4, scroll:2, wrap: 'circular', itemVisibleInCallback: {onBeforeAnimation: carousel_itemVisibleInCallback}, itemVisibleOutCallback: {onAfterAnimation: carousel_itemVisibleOutCallback}, }); } jQuery(document).ready(function() { drawCarousel('1'); $('#carousel1-on').click(function(event) { drawCarousel('1'); }); $('#carousel2-on').click(function(event) { drawCarousel('2'); }); }); </script> </head> <body> <a href="" id="carousel1-on">Carousel 1</a> <a href="" id="carousel2-on">Carousel 2</a> <div class="jcarousel-skin-tango"> <ul id="carousel1"> </ul> </div> </body> </html>
