Hello all, Quick question from a n00b... I'm trying to setup multiple jcarousel textscroller instances on one page displaying rss feeds and somehow I cannot seperate them. Despite doing what I thought was setting up unique instances, they both end up displaying the content of the second rss feed called in the code. I suspect I'm missing a very basic change that will allow the two instances to operate seperately. Here's the jcarousel instnce code for both... any assistance is greatly appreciated!
//FIRST SCROLLER //INITIALIZE jQuery('#mycarousel-txtscroll-01').jcarousel({ vertical: true, size: 0, initCallback: mycarousel_initCallback }); function mycarousel_initCallback(carousel, state) { // Lock until all items are loaded. That prevents jCarousel from // setup correctly and we have to do that in the ajax callback // function with carousel.setup(). // We're doing that because we don't know the exact height of each // items until they are added to the list. carousel.lock(); jQuery.get( 'wp/wp-content/themes/uxable/special_textscroller.php', { 'feed': 'http://feeds.feedburner.com/adaptivepath' }, function(xml) { mycarousel_itemAddCallback(carousel, xml); }, 'xml' ); }; function mycarousel_itemAddCallback(carousel, xml) { var $items = jQuery('item', xml); $items.each(function(i) { carousel.add(i + 1, mycarousel_txtscroll_01_getItemHTML (this)); }); carousel.size($items.size()); // Unlock and setup. carousel.unlock(); carousel.setup(); }; /* Item html creation helper */ function mycarousel_txtscroll_01_getItemHTML(item) { return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>'; }; /** * Utility function for truncating a string without breaking words. */ function mycarousel_truncate(str, length, suffix) { if (str.length <= length) { return str; } if (suffix == undefined) { suffix = '...'; } return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix; }; /** * We show a simple loading indicator * using the jQuery ajax events */ jQuery().ajaxStart(function() { jQuery(".jcarousel-clip-vertical").addClass('loading'); }); jQuery().ajaxStop(function() { jQuery(".jcarousel-clip-vertical").removeClass('loading'); }); //SECOND SCROLLER //INITIALIZE jQuery('#mycarousel-txtscroll-02').jcarousel({ vertical: true, size: 0, initCallback: mycarousel_initCallback }); function mycarousel_initCallback(carousel, state) { // Lock until all items are loaded. That prevents jCarousel from // setup correctly and we have to do that in the ajax callback // function with carousel.setup(). // We're doing that because we don't know the exact height of each // items until they are added to the list. carousel.lock(); jQuery.get( 'wp/wp-content/themes/uxable/special_textscroller.php', { 'feed': 'http://www.boxesandarrows.com/rss.xml' }, function(xml) { mycarousel_itemAddCallback(carousel, xml); }, 'xml' ); }; function mycarousel_itemAddCallback(carousel, xml) { var $items = jQuery('item', xml); $items.each(function(i) { carousel.add(i + 1, mycarousel_txtscroll_01_getItemHTML (this)); }); carousel.size($items.size()); // Unlock and setup. carousel.unlock(); carousel.setup(); }; /* Item html creation helper */ function mycarousel_txtscroll_01_getItemHTML(item) { return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>'; }; /** * Utility function for truncating a string without breaking words. */ function mycarousel_truncate(str, length, suffix) { if (str.length <= length) { return str; } if (suffix == undefined) { suffix = '...'; } return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix; }; /** * We show a simple loading indicator * using the jQuery ajax events */ jQuery().ajaxStart(function() { jQuery(".jcarousel-clip-vertical").addClass('loading'); }); jQuery().ajaxStop(function() { jQuery(".jcarousel-clip-vertical").removeClass('loading'); });