How to rotate 4 (or more) 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.

Solution 1

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.

Solution 2

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.

Solution 3

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...

Solution 4

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.

Edit: I also found the Nivo Slider which I've used quite often and has been working quite well. It also has the ability to have "navigation" and prev/next buttons. Quite handy.

View more solutions

Comments

[penetra]

Thxs...so glad to find that! Very small, especially just for fadding!

[Martin]

Scott, seems you visit a lot of adult websites!