CODEWITHSUNDEEP
javascriptjqueryimage-rotation
Sam Hearn
Sam Hearn

Reputation: 65

jQuery image rotator with multiple instances on single page

Good day,

I've searched and researched this for the past 12 hours and can't find a solution to my problem. And because I'm not too clued up on Javascript and jQuery I'm not exactly sure what to look for and search for.

I've implemented this jQuery Image Rotator on my site successfully and its working brilliantly with one instance of the rotator working on a page. Now, I want to know if its possible to get more than one rotator working on a single page, at the same time.

My efforts so far haven't been successful. The two rotators will load properly, but the first image of the first rotator will start playing. And then, will switch over to the second rotator and continue rotating that one, while the first one is left blank.

Any help and direction on this will be much appreciated.

Upvotes: 0

Views: 2763

Answers (1)

Gustav Barkefors
Gustav Barkefors

Reputation: 5086

As it is currently implemented, no. The rotator code explicitly operates on the contents of whatever matches div#rotator, which should be at most one element.

Doing something like the following would do the trick - pass in the id of the div containing the ul.

function theRotator( id ) {
    //Set the opacity of all images to 0
    var jqElem = $( '#' + id );
    jqElem.find('ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    jqElem.find('ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval(rotate,6000);

    function rotate() { 
        //Get the first image
        var current = (jqElem.find('ul li.show')?  jqElem.find('ul li.show') : jqElem.find('ul li:first'));

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jqElem.find('ul li:first') :current.next()) : jqElem.find('ul li:first'));   

        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');

    };

}


$(document).ready(function() {      
    //Load the slideshow
    theRotator( <id of rotator container 1> );
    theRotator( <id of rotator container 2> );
    ...
});

Upvotes: 2

Related Questions