jQuery image rotator with multiple instances on single page

Question

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.

could you show us your code ... the html rendered and the javascript you initialize it. it would help. though 1 of the things that pops in my mind would be, check if both rotators don't have the same ID, ID's need to be unique in a page. — Sander
– Sander, Commented Oct 19, 2011 at 8:42

Gustav Barkefors · Accepted Answer · 2011-10-19 08:52:23Z

2

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

answered Oct 19, 2011 at 8:52

Gustav Barkefors

5,0761 gold badge29 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sam Hearn Over a year ago

Thank you so much Gustav! As I understand it, do I just put in the ID of the div in "theRotator();" at the end and change nothing else?

Gustav Barkefors Over a year ago

Hi Sam! Replace the function definition of theRotator with the one given here. Also, note that I've relocated the function rotate() - it is now found inside theRotator. Essentially, the effect of this is that each instance of theRotator sees its own rotate function, which in turn makes use of the outer function's jqElem variable. Make sure that the HTML is structured identically for each rotator (except for the containers' id, of course) and that the CSS actually applies to all rotators - e.g. using class="rotator" on the container.

Sam Hearn Over a year ago

Hi, sorry if I'm sounding really dumb here. When you say replace the function definition of theRotator, do you mean the the ones within $(document).ready(function()? What about function theRotator( id )?

Gustav Barkefors Over a year ago

Assuming that you're using the markup, style and JS from the page you linked to, simple replace all contents of the script tag with the code above.

Sam Hearn Over a year ago

I am using the same markup as what I've looked to yes. I've copied and pasted the code above into a new .js file and linked to it in the head. I'm just slightly confused as to where and how to out in the div's id.

|

Collectives™ on Stack Overflow

jQuery image rotator with multiple instances on single page

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related