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');
    });

Reply via email to