Forums

beautifulsites

Hi guys

I want to include two different jquery image faders on the same page on my site. Any suggestions/advice on how I could do this?

Many thanks

Adam

JDS

You using jquery cycle with the "fade" effect? Wouldn't be a problem at all. You'll have two different javascripts to call each div you want to fade..

Hompimpa

Here's a simple item rotator plugin: http://jsfiddle.net/xAQGn/34/

(function($) {
    $.fn.rotator = function(settings) {
        settings = $.extend({
            interval: 3000,
            speed: 1000
        }, settings);

        return this.each(function() {
            var $t = $(this),
                $item = $t.children().addClass('item').hide();

            $t.addClass('rotator');

            if ($item.length > 1) {
                $item.first().addClass('current').fadeIn(settings.speed);
                setInterval(function() {
                    var c = $t.find('.current');
                    if (c.next().length === 0) {
                        c.removeClass('current').fadeOut(settings.speed);
                        $item.first().addClass('current').fadeIn(settings.speed);
                    } else {
                        c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
                    }
                }, settings.interval);
            }
        });
    };
})(jQuery);

treehouse : what would you like to learn today?

Forums

Jquery fading image slideshow - 2 on same page