Question

I’m trying to make an infinitely rotating imagereel with jQuery. This imagereel shifts between images with an interval of 5000 milliseconds, then fading out the ‘old’ image and fading in the ‘new’ image. The image to be displayed has a style-attribute for “display:inline”.

The code can be found below:

function switchImage(){

    var selector = $('#fotoreel img[style="display: inline; "]');
    var nextOne = $(selector).next();
    if($(nextOne).length == 0)
    {
        var nextOne = $('#fotoreel img:first');
    }
    $(selector).fadeOut('normal',function(){
        $(nextOne).fadeIn('normal');
    });
    var t = setTimeout("switchImage()",5000);
}

$(document).ready(function(){
    setTimeout("switchImage()",5000);
});

The problem is that it works fine in Chrome, but in Firefox and in Opera it only shifts image one time. In IE it’s worse; there it doesn’t work at all.

Do you guys know a better way of infinitely looping with javascript? Now I use setTimeout() to call the function again, but that doesn’t seem to work.

EDIT

Okay, thank you everyone! Such fast responds, awesome!

The solution that I used was the one of adding a class and searching for that instead of for the style. The display:inline didn’t appear to be a problem, as it worked out, but all the browsers appeared to implement the jQuery fadeIn() function differently.

I namely wanted to filter EXACTLY on “display: inline ;”, because the spaces were added in Chrome, but not in IE, FF or Opera. So that means the style attribute wasn’t accurately at all to filter with. Stupid me! 🙂

I made sure that a class was added to the image that is showed currently, and find the next one by filtering on that class. Now it works like a charm.

Thank you all for your answers, I love this place! 😀

Answer 1

It’s probably going to work better if you explicitly mark images with a class:

function switchImage(){

  var selector = $('#fotoreel img.current');
  var nextOne = $(selector).length ? $(selector).next();
  if($(nextOne).length == 0)
  {
    var nextOne = $('#fotoreel img:first');
  }
  $(selector).fadeOut('normal',function() {
    $(selector).removeClass('current');
    $(nextOne).addClass('current').fadeIn('normal');
  });
  setTimeout(switchImage, 5000);
}

$(document).ready(function(){
  $('#fortoreel img:last-child').addClass('current');
  setTimeout(switchImage,5000);
});

Note also that in my calls to “setTimeout()” I pass a direct reference to the function instead of a string version of the code to call it.