Rotating images in JavaScript

Question

Should be an easy question for someone who knows JS.

I have a webpage with in the footer 4 images that are rotating.

<div class="column_w190 fl margin_right_40">
    <!-- START: Rotating Images -->
    <div id="rotating-item-wrapper">
        <img src="images/Rotating/greenpeople.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/entrance.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/bluepeople.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/reflection3.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/reflection2.jpg" alt="image" class="rotating-item" width="175" height="175" />
        <img src="images/Rotating/manequine.jpg" alt="image" class="rotating-item" width="175" height="175" />    
    </div><!-- END: Rotating images images -->
    <p>Straffen Toebak</p>
</div>

Where rotating-item is defined in a script I found online:

$(window).load(function() { //start after HTML, images have loaded

  var InfiniteRotator = 
  {
    init: function()
    {
      //initial fade-in time (in milliseconds)
      var initialFadeIn = 1000;

      //interval between items (in milliseconds)
      var itemInterval = 2000;

      //cross-fade time (in milliseconds)
      var fadeTime = 2500;

      //count number of items
      var numberOfItems = $('.rotating-item').length;

      //set current item
      var currentItem = 0;

      //show first item
      $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

      //loop through the items    
      var infiniteLoop = setInterval(function(){
        $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

        if(currentItem == numberOfItems -1){
          currentItem = 0;
        }else{
          currentItem++;
        }
        $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

      }, itemInterval); 
    } 
  };


  InfiniteRotator.init();

});

The problem is that when I add a second column that should also have rotating images, the images in the second column are now shown consequtively, i.e. it will show left:1, left:2, left3, left4, left5, left6, right1, right2 instead of left1 + right1, left2+right2.

So I'm guessing that you can't add the images on the right to the same class "rotating-item", but I don't know in JS how to initiate a new instance of that class.

Answer 1

Thanks Dan Prince, I didn't solve it exactly as you suggested because I could not figure out entirely where to put what (I'm new to JS/HTML).

But you did point me in the right direction (passing the container to the function); The solution below is probably not the prettiest you've ever seen but it solved it without me having to copy all the code for each rotating image.

---

function my_init(container){var initialFadeIn = 1000; //initial fade-in time (in milliseconds)

//interval between items (in milliseconds)
var itemInterval = 2000;

//cross-fade time (in milliseconds)
var fadeTime = 2500;

//count number of items
var numberOfItems = $(container).length;

//set current item
var currentItem = 0;

//show first item
$(container).eq(currentItem).fadeIn(initialFadeIn);

//loop through the items        
var infiniteLoop = setInterval(function () {
    $(container).eq(currentItem).fadeOut(fadeTime);

    if (currentItem == numberOfItems - 1) {
        currentItem = 0;
    } else {
        currentItem++;
    }
    $(container).eq(currentItem).fadeIn(fadeTime);

}, itemInterval);} 



$(window).load(function () { my_init('.rotating-item'); my_init('.rotating-item2'); my_init('.rotating-item3'); my_init('.rotating-item4') });

Answer 2

Expression $('.rotating-item') grabs from DOM all HTML elements with class="rotating-item" in order as it is presented in DOM from top of the page down, and it does not care, that they are in different columns.

I presume, you want two DIVs with rotating (transitioning) images. I thing it could be solved this way:

/* your JavaScript */
function rotateImages (container) // CONTAINER -- WHERE IT SHALL ROTATE IMAGES
 {
    var initialFadeIn = 1000; // in miliseconds
    var itemInterval = 2000; // in miliseconds
    var fadeTime = 2500; // in miliseconds
    var currentItem = 0; //set current item


    // WE FIND ALL IMAGES IN THE CONTAINER
    // NO FURTHER NEED FOR class="rotating-item"
    var images = container.find('img');

    // HIDE ALL IMAGES
    images.hide()

    // show first item
    images.eq(currentItem).fadeIn(initialFadeIn);

    // loop through the items
    // TIMER ID IS RETURNED FROM THIS FUNCTION,
    // SO YOU CAN TERMINATE ROTATING IN FUTURE
    return setInterval(function(){
        images.eq(currentItem).fadeOut(fadeTime);

        if(currentItem === images.length -1)
            currentItem = 0;
        else
            currentItem++;

        images.eq(currentItem).fadeIn(fadeTime);
        }, itemInterval);   
    }   
};

Then you set unique id for every column, where you want rotate images, eg:

<!-- your HTML -->
<div id="rotating-item-wrapper-ONE">
    <!-- the img elements does not need to have special class,
       it will rotate all img in this div -->
    <img ...></img>
    <img ...></img>
</div>
<div id="rotating-item-wrapper-TWO">
    <img ...></img>
    <img ...></img>
    ...
</div>

And finaly you initiate the rotator for each column separately with jQuery selector for their IDs in your JavaScript:

/* your JavaScript */
var col1 = $('#rotating-item-wrapper-ONE')
var col2 = $('#rotating-item-wrapper-TWO')
var timer1 = rotateImages(col1);
var timer2 = rotateImages(col2);

You can then call clearInterval() to stop rotating, ie:

/* your JavaScript */
// as a result of some action
clearInterval(timer1) // stops rotating in col1