CODEWITHSUNDEEP
jqueryimagefade
Darryl Hein
Darryl Hein

Reputation: 144967

How to rotate 4 (or more) images, fading between each one?

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.

Upvotes: 14

Views: 36175

Answers (4)

Darryl Hein
Darryl Hein

Reputation: 144967

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.

Upvotes: 1

adardesign
adardesign

Reputation: 35701

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

Upvotes: 1

Taeram
Taeram

Reputation: 586

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.

Upvotes: 21

strager
strager

Reputation: 90012

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.

Upvotes: 5

Related Questions