Comments on: Making fancy websites without Flash 2: Animating background image

By: Michael

Michael — Tue, 19 Jul 2011 15:03:16 +0000

Actually, in the jquery.BgImageTransition.js file, I added this:

if (helperElement.css(‘display’) == ‘block’) {
$(this).css(‘background-image’,'url(‘+src+’)');
}

just before the var tempImage = new Image(); statement.

Since the helperElement is the div that the plugin creates and toggles in and out in front of your original element (via z-index), I checked if the helperElement has “display:block” and then if so, changed the background-image to the original div (in my case). Seems to work! Now to test it in IE… =(

By: Michael

Michael — Tue, 19 Jul 2011 14:38:01 +0000

Great help—thanks! Like a few people have mentioned, the optional “step 5″ in the case of several photos was never explained, was it? The way the plugin natively works is alternating back to the initial image every time…

There’s got to be a way to change the initial div as well, so that when the HelperElement fades out, the next image is in place (or even if, once the HelperElement faded in, to set the same image as the initial background-image, so that when the HelperElement fades out, it doesn’t revert to the initial image, and you could just speed up the transition or something)…

Any help would be greatly appreciated… Thanks!

By: janimal

janimal — Fri, 07 May 2010 09:13:31 +0000

I used a modulo function to send the images sequentially and to wrap around the index, but the issue is the same as Jason has.

The problem appears to be related to your point number 5 in the post.

The script never replaces the image used for the initial div. I will try to fix it myself, but I am brand new to Javascript.

For those struggling with a sequential function try the following.
1) use the array index instead of a string to set the next image
eg: $(‘#banner’).BgImageTransition(‘/images/featured/’+bgImages[currIndex]);

2) Set currIndex to 0 before calling setInterval

3) increment currIndex within setInterval like this
currIndex = ++currIndex % bgImages.length;

This will give you sequential indexes which wraps around to the 1st element when it reaches the upper bound of the array

By: Jason

Jason — Fri, 02 Apr 2010 01:40:35 +0000

I’m also trying to run through a list of images, which was easy enough to do, however it alternates to the initial image every other time.

So instead of: Image1.jpg, Image2.jpg, Image3.jpg, Image4.jpg, Image5.jpg…..
I’m getting: Image1.jpg, Image2.jpg, Image1.jpg, Image4.jpg, Image1.jpg, Image6.jpg…..

By: Bill

Bill — Fri, 11 Dec 2009 14:44:06 +0000

This is very helpful. However, in your demo, Rosso Castilla.JPG never loads?

By: georgi

georgi — Fri, 28 Aug 2009 06:53:54 +0000

You should I am no sure whether you can. Just create a new div element the first child of the body and make it “snap” the body borders. Then make it switch images.

By: Karthick

Karthick — Thu, 27 Aug 2009 22:32:32 +0000

Hi Georgi,

Great script! but i have to apply it on body tag instead of div..Could u plz guide?

Thanks,

karthick

By: georgi

georgi — Fri, 31 Jul 2009 10:03:59 +0000

@Tom: I cannot write your js since you know your project much better and your job to do it. Create an array with the images and loop through it instead of using random()