image rotators in the same page with jQuery

Question

Hello All, after a day trying to make this work, I finally decide to ask for help ;-), Since I'm a new at jQuery, I hope to find someone to help fix this issue. I have a portfolio page where I need to run the gallery in a growl for each single project. Everything works just fine until I'm adding a second gallery. The code that I have for each block in my html markup looks like this:

<ul class="rotator_details">
     <li><img src="big/01.jpg" alt=""></img></li>
     <li><img src="big/02.jpg" alt=""></img></li>
     <li><img src="big/03.jpg" alt=""></img></li>
</ul>

Jquery like so

function init_rotator_details() {

    if (!$('.rotator_details').length) {

        // If not, exit.
        return;
    }

    // Rotate speed.


    // Pause setting.
    var pause = false;

    // Rotator function.
    function rotate(element) {

        // Stop, if user has interacted.
        if (pause) {
            return;
        }

        // Either the next /first <li>.
        var $next_li = $(element).next('li').length ? $(element).next('li') : $('.rotator_details li:first');

        // Either next / first control link.
        var $next_a = $('.rotator_details_controls a.current').parent('li').next('li').length ? $('.rotator_details_controls a.current').parent('li').next('li').find('a') : $('.rotator_details_controls a:first');

        // Animate.
        $('.rotator_details_controls a.current').removeClass('current');
        $next_a.addClass('current');

        // Continue.
        function doIt() {
            rotate($next_li);
        }

        // Fade out <li>.
        $(element).fadeOut(400);

        // Show next <li>.
        $($next_li).fadeIn('fast', function() {

            // Slight delay.
            setTimeout(doIt, 3000);
        });
    }

    // Add click listeners for controls.
    $('.rotator_details_controls a').click(function() {

        // Change button text.
        //$('.rotator_details_play_pause').html('PLAY');
        $('.rotator_details_play_pause').html('PLAY').css({
            'backgroundPosition':'right'
        });

        // Show target, hide other <li>.
        var prev_next = $(this).attr('href');

        //$($(this).attr('href')).fadeIn('fast').siblings('li').fadeOut('fast');
        $("#"+prev_next).fadeIn(400).siblings('li').fadeOut(400);

        // Add class="current" and remove from all others.
        $(this).addClass('current').parent('li').siblings('li').find('a').removeClass('current');
        ;

        // Pause animation.
        pause = true;

        // Nofollow.
        this.blur();
        return false;
    });
    // Pause / Play the animation.
    $('.rotator_details_play_pause').click(function() {
        // What does the button say?
        if ($(this).html() === 'PAUSE') {
            // Stop rotation.
            pause = true;
            // Change the text.
            $(this).html('PLAY').css({
                'backgroundPosition':'right'
            });

        } else {
            // Remove class="pause".
            pause = false;
            // Start the rotation.
            rotate('.rotator_details li:visible:first');
            // Change the text.
            $(this).html('PAUSE').css({
                'backgroundPosition':'left'
            });
        }
        this.blur();
        return false;
    });
    // Hide all but first <li>.
    $('.rotator_details li:first').show();
    // Wait for page load.
    $(window).load(function() {
        // Begin rotation.
        rotate($('.rotator_details li:visible:first'));
    });
}

$(document).ready(function() {
    init_rotator_details();
});

Answer 1

Here is the Best examples of Image Rotators.... http://www.raghibsuleman.com/jquery-image-rotator-teaser

Answer 2

Your best bet is to use a class structure so the two don't overlap each other with timeouts. Just pass the new object with the timeouts.