How to rotate 4 images, fading between each one?

Question

I have 4 images, which I want to fade between each other in a loop. I have something like the following:

<img src="/images/image-1.jpg" id="featureImg1" />
<img src="/images/image-2.jpg" id="featureImg2" style="display:none;" />
<img src="/images/image-3.jpg" id="featureImg3" style="display:none;" />
<img src="/images/image-4.jpg" id="featureImg4" style="display:none;" />

I am up for revisions to the HTML, although I cannot use absolute positioning in this case. I am using jQuery else where on the site, so it's available. I also need to deal with an image not being loaded right away as the images are larger.

Answer 1

You can use a div and an img, like so:

<div id="featureImgContainer">
    <img src="/images/image-1.jpg" id="featureImg" />
</div>

In your Javascript do something like this (pseudo-jQuery):

function rotateImage(newImage) {
    var oldImage = $("#featureImg").image();

    $("#featureImgContainer").css({backgroundImage: "url('" + oldImage + "')"}); // TODO Escape URL

    $("#featureImg").image(newImage).opacity(0).fadeIn();
}

Basically, we make the div's background the "old" image, and the img the new one. We set the img to 0 opacity, and fade it in, so it appears as if the old image is fading into the new one. After the fade in, the div isn't shown any more.

Take care to set up the CSS appropriately to set the width/height of the div and the background position where appropriate.

Answer 2

I have also found this extension to jQuery: http://www.linein.org/blog/2008/01/10/roate-image-using-jquery-with-plugin/

It seems to do it quite nicely, although a lot of code for not too much.

Answer 3

I'd highly recommend the jQuery Cycle plugin. It may do more than you're looking for in this case, but it's well structured and easy to setup. There's also a lightweight version called jQuery Cycle Lite which just supports fade transitions.

Answer 4

you can stay with the core of jQuery and have a loop bring up the z-index..

it can be done in a very simple way...