[jQuery] Multiple jcarousel textscroller instances displaying RSS
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>'+mycarousel_truncate($('description',
item).text(), 90)+'
';
};
/**
* 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>'+mycarousel_truncate($('description',
item).text(), 90)+'
';
};
/**
* 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');
});