Javascript / CSS Crossfader

Posted on September 25, 2006

In response to this article at ajaxian.com, and just for the sheer fun of it, here's a small-footprint object-encapsulated unobtrusive javascript crossfader.

Download Crossfader v1.3

At 1.7Kb it's one hundredth of the size of the scriptaculous library used in the other example. (Woohoo.)

The constructor takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds).

var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

Version History

  • 2006-11-02 : 1.3 : When a single element is passed, it is simply faded in. Then the script stops.
  • 2006-11-01 : 1.2 : Rounded the opacity value for IE to an integer instead of a floating point number. Maybe it'll speed things up in IE.
  • 2006-09-29 : 1.1 : DIVs with an opacity of 0 have their visibility set to "hidden", enabling links to be clicked.
  • 2006-09-25 : 1.0 : First release.


Comments (92)

Brent said

That's what I'm talkin' about. Thanks!

Posted by: Brent at September 25, 2006 08:15 PM .

Backspace said

Is it easy to show in random order?

Posted by: Backspace at September 25, 2006 09:44 PM .

Backspace said

What about being able to pause while hovering over an element? Btw, Nice light script and thanks for sharing it. :)

Posted by: Backspace at September 25, 2006 10:05 PM .

Matthew Dorey said

Hi, I had a go at implementing a 24 picture photo gallery using these techniques. I think it creaks a bit (I should perhaps have used fewer pictures or smaller ones maybe) but I'm happy with it for the time being. You can check this out at:

here.

Posted by: Matthew Dorey at September 25, 2006 10:58 PM .

Matthew Dorey said

Actually it only creaks on Safari. On Camino and Firefox it's fine. I will check IE6 and IE7 on a windoze box tomorrow.

Good work!

Posted by: Matthew Dorey at September 25, 2006 11:26 PM .

bsn said

@Backspace: Both possible, it all a question of motivation. :)

@Matthew: Yup. Pretty creaky on Safari. So much for Core Image (if the WebKit even uses it)

Posted by: bsn at September 26, 2006 07:16 AM .

Eddie said

Would this be possible with use of images along side the scripting perhaps?

Posted by: Eddie at September 26, 2006 08:06 AM .

bsn said

@Eddie: The DIVs can theoretically contain any content you like (flash or quicktime might not be a good idea though). The issue here is performance. Check out Matthew Dorey's example page above.

Posted by: bsn at September 26, 2006 09:38 AM .

Rob Roy said

I think you'll find the example here

(http://www.maths.bath.ac.uk/~mapmdd/zgz.html)

Posted by: Rob Roy at September 26, 2006 05:06 PM .

Tom said

Very good work, nice javascript crossfader.
Script size is incredible :)

Posted by: Tom at September 27, 2006 11:43 AM .

Paul said

Thank you very much, awesome job!
I'm currently redesigning my site and this may come in very handy, depending on what I decide to do with it. I'll probably tinker with it and get some RSS feeds to update automatically while crossfading and updating. Again, thanks a mil!

Posted by: Paul at September 27, 2006 01:39 PM .

Andrea said

I'm experiencing problems with links: it keeps the link of the last div in my array, even if the div containing it has faded... anyone having the same problem?

Posted by: Andrea at September 29, 2006 12:29 AM .

Nasir said

Thats great. I really wanted that kind of stuff.

Posted by: Nasir at September 29, 2006 07:14 AM .

Elliott Cable said

Both the above example links are broken. Awesome script!

Posted by: Elliott Cable at October 2, 2006 07:03 PM .

John McDowall said

Has anybody had a problem with this in IE6 where the text goes really weird like its been magnified ?

Posted by: John McDowall at October 3, 2006 05:21 PM .

John McDowall said

Hi Guys,

I've discovered that using ClearType causes IE6.0 to really smudge up your text when you start using the alpha filter. Check out my website for details.

Posted by: John McDowall at October 5, 2006 04:12 PM .

bsn said

Hi John,

Thanks for the tip. IE is always the last browser I test on (as a Mac user), although it shouldn't be. It's nearly always leads to disappointment.

Regarding your comments about browser wars - Microsoft has always been under pressure from the web development community, but to little avail. They happen to have a huge userbase that couldn't care less about the CSS box-model etc., and we have to develop for this userbase, most of whom are perfectly happy with IE (or unaware of alternatives). "But Mum! Firefox is standards compliant!!!". Web standards are our problem; clients and users just want things to work.

Posted by: bsn at October 5, 2006 04:27 PM .

Ben J Walker said

This probably seems pretty pernickety, but don't get me wrong it's a great script, but the fading is a little iffy compared to the other one (http://mikeomatic.net/techtips/css-crossfader/)... am I wrong?

Posted by: Ben J Walker at October 7, 2006 12:01 PM .

bsn said

@Ben
What browser are you using?
I haven't done any fine tuning on the fading script. I just used a basic ease-in, ease-out equation. In Safari it looks fine.

Posted by: bsn at October 7, 2006 12:15 PM .

michael said

I'm just learning JavaScript and love this but I don't know enough to set the variables for cross-fade duration and display time. You show an array to do this but it is not in the script. I'm assuming this is to make the script as small as possible. For those like me who are still struggling, including it with comments would be helpful.

Basically, how do I do that?

Posted by: michael at October 7, 2006 05:51 PM .

bsn said

@Michael
The variables are set in a javascript at the bottom of the HTML source code (view source of the demo page and scroll down).

The script itself is in an external .js file. This means that the one embedded script can be used across different pages with different settings (fade duration and display times) being made in the HTML pages themselves, without the need for several copies being made of the script. When the script is updated, only needs to be replaced.

The javascript is without comments to reduce file size. It would probably be better to provide two versions of the script: one with comments and one without.

Tim.

Posted by: bsn at October 7, 2006 06:18 PM .

michael said

Thanks Tim, I didn't look in the HTML page, just the javascript file.

Posted by: michael at October 8, 2006 06:32 PM .

Ben J Walker said

@bsn
FireFox & IE6. The text seems to drop downwards a pixel during the fade :/

Posted by: Ben J Walker at October 16, 2006 12:48 PM .

Ben J Walker said

Just noticed it looks uber-smooth in IE7!

Posted by: Ben J Walker at October 16, 2006 03:35 PM .

Js said

Very nice script. The fade looks nice.

Can anyone point me in the right direction if I want to stop the fade when "mouseOver"?

Posted by: Js at October 17, 2006 04:11 PM .

Dave Sherratt said

Now thats some coding nicely done

Posted by: Dave Sherratt at October 23, 2006 08:11 PM .

Chris Heilmann said

The weird characters in MSIE 6 are because of the font smoothing. If you give the parent element a background colour it doesn't happen.

And it is Unobtrusive JavaScript, not unobtusive :)

Posted by: Chris Heilmann at October 23, 2006 08:31 PM .

Michal said

Nice one! Thanks!

Posted by: Michal at October 25, 2006 05:11 PM .

Greg said

Really nice work, I love this elegant solution.

Potential problem: I'm finding quite a difference (on the PC) in performance between IE and Firefox: Running this in IE, it's grabbing 40-50% CPU during the crossfade part of the fade-hold cycle, while in Firefox, the system hardly notices that it's running, as one would expect.

Maybe I've done something wrong? Comments?

Thanks much for the code!

Posted by: Greg at November 1, 2006 07:12 AM .

bsn said

Hi Greg,

I'm on a Mac, so it's not easy for me to test on IE. If anyone is doing something wrong, then it's me!

IE & Firefox handle transparency differently (obviously). As I've said before, the tweening code for the transparency is unoptimised. When (if) I have time I'll have a look at it (50% is pretty high!). Can't promise anything at the moment though.

Tim

Posted by: bsn at November 1, 2006 07:23 AM .

damaru said

Hey

I am totally new to javascript and css and probably going to get flame for that, but I am trying simply to use the first fade in from the whole script and can't seems to know how or whereto start or what to remove to only have the first fadein effect. This is still too complex for me to completely understand but it seems the best way to create a nice fadein in css/javascript as far as I could search the net.

Thanks

Posted by: damaru at November 2, 2006 05:17 AM .

bsn said

@damaru

"I am totally new to javascript and css and probably going to get flame for that"
My God! What do you expect? :)

I added a couple of lines of code to the script. If you pass just one element to be faded, the script will simply fade it in and then stop.

Cheers,

Tim.

Posted by: bsn at November 2, 2006 07:28 AM .

milo said

Cool script, what about developing a wp plugin?

Posted by: milo at November 9, 2006 02:36 PM .

raj said

michael said

I'm just learning JavaScript and love this but I don't know enough to set the variables for cross-fade duration and display time. You show an array to do this but it is not in the script. I'm assuming this is to make the script as small as possible. For those like me who are still struggling, including it with comments would be helpful.


Basically, how do I do that?

Posted by: raj at November 13, 2006 02:50 PM .

bsn said

@milo

WP Plugins are serverside scripts that produce markup. This is a clientside javascript that manipulates the CSS on existing markup. I'm afraid I don't really see the point of a plug-in.

@raj

RTFM:

The constructor takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds).

var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

The consructor is called from within the HTML page, not from within the javascript. Scroll down in the source code of the example page.

Tim.

Posted by: bsn at November 13, 2006 03:02 PM .

kurtis said

This script rocks. Only question I have with it is when I load it (ex: here) all the divs are displayed and then on the page load finishing finally the visibility:hidden; takes place. Any workaround for that? Oh, and it only happens sometimes.

Posted by: kurtis at November 17, 2006 01:21 AM .

trent said

Kurtis,...maybe preset your css to display: none; on those images? I havn't played with this script much so not real sure. I like the size of this script tho.

Posted by: trent at November 28, 2006 02:02 PM .

damaru said

Thanks bsn

The fade in for just one image work good :) I luv it.
What about if I would like to fade out instead ? I was just wonderingsince I use the script jst to fade in once, if it would be easy to chane for a fadeout or having another variable in the constructor to specify only to fade out...

Just a thought, and a wish... thanks for the code, it helps me learn a lot

Posted by: damaru at November 29, 2006 02:24 AM .

bsn said

@damaru

I haven't tested anything, but there are two things you need to change:


At the beginning of the script, all the DIVs are hidden:

document.getElementById(divs[i]).style.opacity = 0;
document.getElementById(divs[i]).style.position = "absolute";
document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
document.getElementById(divs[i]).style.visibility = "hidden";

Comment out all except the position (or set the opacity to 1, the alpha to 100 and the visibility to block).

The following line fades the opacity between 0 and 100.

var ieop = ¬
      Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) ¬
      * 100 );

Just swap the 1 and the 0 to fade the other way.

Can't guarantee that it'll work, but it's a step in the right direction.

Cheers,
Tim.

Posted by: bsn at November 29, 2006 08:30 AM .

James said

@Ben J Walker
I was having the same problem with text moving slightly in Firefox. The way around the problem was to set the line height to 100%.

Posted by: James at November 29, 2006 04:18 PM .

tom said

but you still need prototype for this.!

Posted by: tom at November 30, 2006 04:33 PM .

bsn said

Hi Tom,

what do you need Prototype for?

Tim.

Posted by: bsn at November 30, 2006 04:36 PM .

learndesk said

Hello,
first of all I have to say: Nice script.
And it is possible to start more than one fader object (actually I use 6 faders). I've tested it. But it slows the Browser down.

But I have a question. I want to use only one of the 6 faders at a time (I have a picture and on MouseOver it is set "hidden" so that the fader object can be seen). How it is possible, that the fading starts "onMouseover" and stops at "onMouseLeave".
It would be wonderful, if there would be a start- and a stop-function for the fadeobjects.

I hope you can help me.

Sorry about my English, I am from Germany

Posted by: learndesk at December 4, 2006 12:54 PM .

Don said

Now I'm puzzled. Apparently my new page is not working on my Apache server, but it works fine on my WinXP development machine. I don't think the problem is related to the script, but rather to how I've set it up on the server, so if someone can give me any help, I'd appreciate it. I've already checked my pathnames and upper/lowercase naming and I think it's ok. But it acts like it isn't even finding the script.

Posted by: Don at December 6, 2006 11:30 PM .

Don said

Never mind, I find I have some sort of weirdness going on, on my server's file system. That's the problem.

Posted by: Don at December 6, 2006 11:47 PM .

Lz said

Very nice and easy to implement script. I have a question about how to use the script on more than one image on the same page?

Posted by: Lz at January 13, 2007 03:31 PM .

0rb1t said

AWESOME!...

Posted by: 0rb1t at January 24, 2007 12:33 PM .

andre said

good, I'm gonna test it

Posted by: andre at February 16, 2007 01:37 AM .

andre said

Good, I'm gonna test it

Posted by: andre at February 16, 2007 01:38 AM .

mickey said

Hi Tim, i'm diving in your script to understand object oriented javascript.
It would be indeed very nice to add some comments :)
I particularly don't understand the beginning, what useBSNns is for ? it seems that _bsn = this; is used every time to create the namespace ? I tryed useBSNns = true, but don't work.
And thanks again !

Posted by: mickey at March 2, 2007 10:43 AM .

mickey said

ok i got it :)
you have to call _bsn.Crossfader if you use namespace, great !

Posted by: mickey at March 2, 2007 10:54 AM .

bsn said

Hi Mickey,
yeah, you got it. I don't normally bother with a namespace, because I normally don't use third-party javascript (at least not many), but I thought it wouldn't be a bad idea to use the _bsn object as a container for all of my javascript objects, and to point _bsn to the window by default.

If you set useBSNns to "true", the script creates an empty object called "bsn", which is the actual namespace.

On reflection following script would be better:

var sNameSpace = ''; // set optional namespace here
		
if (sNameSpace)
{
    if(typeof(this[sNameSpace]) == "undefined")
    {
        _bsn = this[sNameSpace] = {};
    }
    else
    {
        _bsn = this[sNameSpace];
    }
} else {
    _bsn = this;
}
		
alert(_bsn);

Then you can set the name of the optional namespace yourself. If you leave the sNameSpace variable as an empty string, the script sets _bsn to the window object, and _bsn objects can be called without a namespace prefix.

Of course you can't have another variable called _bsn, but that shouldn't crop up very often.

The advantage? If I insert this code into the top of all of my external javascript files, I can change (or activate) the namespace with one variable in my html page.

Posted by: bsn at March 2, 2007 02:59 PM .

Ben Roberts said

bsn said

@damaru

I haven't tested anything, but there are two things you need to change:


At the beginning of the script, all the DIVs are hidden:

document.getElementById(divs[i]).style.opacity = 0;
document.getElementById(divs[i]).style.position = "absolute";
document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
document.getElementById(divs[i]).style.visibility = "hidden";

Comment out all except the position (or set the opacity to 1, the alpha to 100 and the visibility to block).

The following line fades the opacity between 0 and 100.

var ieop = ¬
Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) ¬
* 100 );

Just swap the 1 and the 0 to fade the other way.

Can't guarantee that it'll work, but it's a step in the right direction.

Cheers,
Tim.

After doing a little testing and debugging of my own, I found that instead of swapping the 1 and the 0, a different modification needs to be made.

Change this line:

var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );

To this:

var ieop = 100 - Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );

This worked for me and hopefully it's helpful for others as well. Nice job on the original script Tim!

Posted by: Ben Roberts at April 2, 2007 12:12 AM .

Rusty said

Hi,
I like the script that you put together. I am wondering if I could get a little help? I'm a python (server and workstation applications) person and haven't done any java programming.
What I would like to do is modify the script so that all the divs are looped through once and ending with the final div being displayed.
I tried hacking my way through the code but I haven't had much succes. Any ideas?

Posted by: Rusty at April 9, 2007 04:22 AM .

Rusty said

Hi,
I like the script that you put together. I am wondering if I could get a little help? I'm a python (server and workstation applications) person and haven't done any java programming.
What I would like to do is modify the script so that all the divs are looped through once and ending with the final div being displayed.
I tried hacking my way through the code but I haven't had much succes. Any ideas?

Posted by: Rusty at April 9, 2007 04:23 AM .

Yesterday's Fish said

For random order, add the following function at the top:

function randOrd(){
return (Math.round(Math.random())-0.5);
}

Then you can sort the aDivs array (after it's been created) with this:

this.aDivs.sort(randOrd);

Posted by: Yesterday's Fish at April 10, 2007 05:02 PM .

Darbo said

Thanks bsn! Nice and tidy.

Thanks Fish - the random is a nice touch.

Posted by: Darbo at April 23, 2007 05:36 AM .

Mike said

Can someone point me at the working random version, or where to insert the random code ?

Posted by: Mike at May 9, 2007 04:06 PM .

Bob said

I know it's come up before, but any leads on pausing the slideshow with mouseOver?

Not that I'm complaining - out of the box, this is really an amazing script!

Posted by: Bob at May 21, 2007 07:11 PM .

Terry said

Just wrote my own crossfader, and it seemed to be working but with Ubuntu 7.04/Firefox 2.0.0.3 I get 90+% CPU load from the process 'Xorg' while fading in and out.

So looking at the demo for the script presented on this page at:

http://www.maths.bath.ac.uk/~mapmdd/zgz.html

same deal... any clues as to where in the system this is happening? Is it new in FF 2.x or did earlier versions do it too?

Posted by: Terry at May 28, 2007 05:23 AM .

Bob said

Just discovered this script through javascriptsource. I tried using the script for two images, but can't get them to display in the same place in both Firefox and I.E.7. I.E. want to display the images about 50px to the right. I tried all the available CSS positioning values to no avail.

Posted by: Bob at June 11, 2007 05:12 PM .

Bosus said

Hi there!
Thanks for a great script! When I tried tp implement it on a website I'm building it worked fine on my local machine but as soon as it goes on to the webserver it displays all the different elements at once, one underneath another. Can anybody help me with this? Just so you know I'm quite new at this...
Ohh..the URL is http://www.rhemacenter.se/new/index5.html

Thanks!

Posted by: Bosus at June 18, 2007 09:49 PM .

Bosus said

Ohh....silly me...it was just a case of wrong name on js-file. bsn.crossfader.js instead of bsn.Crossfader.js.

Thanks anyway!

Posted by: Bosus at June 25, 2007 12:02 PM .

Mark said

Hi Tim,

Great script! I could use some help, though. I'd like to have the script stop after completing one pass through the element array. Presently it just keeps cycling through the divs. Cheers!

Mark

Posted by: Mark at June 29, 2007 07:27 AM .

bsn said

Hi Mark,

Line 56:

if (!this.aDivs[this.nAct])	this.nAct = 0;

This sets the active div back to 0, and the whole thing starts again.
Try:

if (!this.aDivs[this.nAct])	return false;

This should stop the repetition but preventing a new setInterval from being set.
(Haven't tested it though!)

Tim.

Posted by: bsn at June 29, 2007 09:05 AM .

Mark said

Works like a charm; thanks Tim! One more thing: though I imagine this is best triggered using cookies, I would like the crossfade effect to only execute once per session, with subsequent page loads just bringing up the final cf(x) div. I was wondering if you had any suggestions on how your script could accomodate this. Thanks again!

Mark

Posted by: Mark at June 30, 2007 07:42 AM .

M. Flyer said

Can someone point me at the working random version, or where to insert the random code ?

Greetz and Thanks

Posted by: M. Flyer at July 1, 2007 01:04 AM .

scotty said

Bob said

I know it's come up before, but any leads on pausing the slideshow with mouseOver?

Not that I'm complaining - out of the box, this is really an amazing script!

I'd also be interested in this. Anyone smarter than me want to help out?

And I also agree, great script. Thanks for sharing it!

Posted by: scotty at July 18, 2007 05:59 PM .

Gianluca said

Hi! This script is marvellous!

But when i use IE7, the browser block the script and ask if i want to execute it (showing hidden div).

I see a site that use the script without this problem: http://www.wiitalia.it.

how can i use the script without this problem? Thanks!

Posted by: Gianluca at July 23, 2007 11:49 AM .

Tamsin Carter said

HI

This is a great script and really useful. I have used it on literaryconsultancy.co.uk as well as seriousaboutsport.co.uk. But i would really like to randomise the order that the elements appear in - can you help???

Tamsin

Posted by: Tamsin Carter at August 2, 2007 03:16 PM .

decimus said

I dont know if this script is good for text crossfading its better for images ;-)))

Posted by: decimus at August 7, 2007 02:23 PM .

Palaniappan said

Hey, that warning only comes when the script is on your computer. If you upload it onto a webserver, it doesn't come up.

Gianluca said

Hi! This script is marvellous!

But when i use IE7, the browser block the script and ask if i want to execute it (showing hidden div).

I see a site that use the script without this problem: http://www.wiitalia.it.

how can i use the script without this problem? Thanks!

Posted by: Palaniappan at August 22, 2007 06:15 AM .

HundredsofEggs said

I seem to be the only one with certain pixels whiting out on IE only. It appears to be the black pixels of some JPEGs. I don't know if it's due to the script or the images, but the images look normal when embedded normally.

Posted by: HundredsofEggs at September 11, 2007 06:13 PM .

Dennis said

Hi,

I'm not a javascript or css coder, but sort of figured out how to use the script in the home page of my website (www.greatnewgames.com). It seems to work fine in IE 7.0, but in FireFox it flashes spuriously during the transitions. If you view the source code, the two relevant pieces of code are located just above the and after the comment .
Can anyone give me any guidance on fixing this? Thanks!

Posted by: Dennis at September 16, 2007 05:28 PM .

Dennis said

Whoops! In previous post I used HTML to refer to code locations. Of course those references disappeared! So let's try "the two relevant pieces of code are located just before the end of the head section (lines 137-165), and after the START MAIN GRX comment (lines 225-246)".

Posted by: Dennis at September 16, 2007 05:35 PM .

Dennis said

Follow-up to previous two posts: the spurious flashing problem in Firefox disappeared when I updated to latest version of FF. Everything works fine now - this is an excellent little script! Thanks.

Posted by: Dennis at September 17, 2007 04:26 PM .

ohmy said

Did anyone hack in mouseover yet? Nice script but I think it would be nic e with the option.

Posted by: ohmy at September 28, 2007 02:01 PM .

debbilboy said

We were wondering the same thing. We've been able to get an alert to appear when we mouseover, but haven't got a clue how to effect a pause on mouseover.

Posted by: debbilboy at September 28, 2007 11:08 PM .

gs said

I left a long post describing how I extended the code to support pause and resume. I used click, but it could probably be easily modified to support mouseover. However, since I haven't posted before, my post had to be approved, and I haven't seen it show up yet.

Posted by: gs at October 1, 2007 02:53 PM .

Anton Andreasson said

For people not being able to fix this using the "background:#fff" method, be sure not to use a PNG24 image as a background of the element in question. Use a GIF to feed IE6 with.

Posted by: Anton Andreasson at October 1, 2007 06:16 PM .

gs said

Let me start by saying that Crossfader is an awesome script. I love it.

I have extended the Crossfader functionality by adding four new public methods:

StopFade() -- Pause the progression by stopping Crossfader
StartFade() -- Resume the progression by starting Crossfader
SetFade(newFadeTime) -- Change the duration of the fade transition (in seconds)
SetDelay(newDelayBetweenFades) -- Change the length of time between transitions (in seconds)

By providing a user interface to these four methods, you can give the user control over the slideshow experience -- stop it, start it, speed it up, or slow it down.

I have a working demo here:

http://beaglewriter.com/crossfader/

In this demo, the user can stop and start the show by clicking pushbuttons, or by clicking on the displayed image itself. It should be possible to implement mouseover as well, but I didn't get that far. The start-stop-by-clicking-image feature can be enabled or disabled by using a checkbox. Also, in this demo, I used some combination CSS and Javascript to display the word "Loading" until all the slide content is loaded. I have dialup at home, and was finding that the show could progress to a slide before its content was loaded, so this demo waits until all content is loaded before starting. Finally, if the user has JS disabled, the page degrades by simply displaying all of the content.

The extended Crossfader code with the four new methods (and a viewable copy in case your browser hiccups on .js files) are here:

Actual code: http://beaglewriter.com/crossfader/js/bsn.Crossfader.js
Viewable copy: http://beaglewriter.com/crossfader/showbsnjs.php5

The demo page, where you can see some suggestions for how to implement the Crossfader methods, consists of an HTML page and a Javascript file. The HTML and JS code, along with viewable copies for hiccuping broswers, are here:

HTML actual code: http://beaglewriter.com/crossfader/templates/imagefade.htm
HTML viewable copy: http://beaglewriter.com/crossfader/showhtml.php5
Javascript actual code: http://beaglewriter.com/crossfader/js/crossfaderwrapper.js
Javascript viewable copy: http://beaglewriter.com/crossfader/showwrapperjs.php5

My email address is in the heading of the crossfaderwrapper.js file, if you need to get in touch with me.

And again, thanks to bsn for this awesome tool!

Posted by: gs at October 1, 2007 11:17 PM .

lad said

Wonderful work!, that crossfader is now doin his job on one of my Blogs, thank you verymuch

Posted by: lad at October 7, 2007 02:03 AM .

|X-Crap| said

I have a huge problem with this script in Firefox. It worked okay in most of the webpages i used, except in a last one

http://www.fundodemaneio.com/teste/recursos.php

Here you may need to refresh sometimes, sometimes it loads okay but somethimes it crashes the 3

  • boxes under the menu and completly messes the design :\
  • It's really strange because if you navigate using this boxes sometimes appears okay and sometimes it messes everything. Works perfectly in IE, only crashes in Firefox.. if someone have a solution...

    Posted by: |X-Crap| at November 5, 2007 07:48 PM .

    Nick said

    This is a fantastic bit of kit. Excellent work on the development and maintenance, am using it all the time!

    Posted by: Nick at November 8, 2007 07:44 PM .

    gs said

    |X-Crap|, I visted the page you referenced using Firefox and refreshed repeatedly, and was never able to repeat the problem you mentioned. Did you get it resolved?

    Posted by: gs at November 16, 2007 01:24 PM .

    jhz said

    This is a great script--needed entire DIVs to fade & so not many other scripts worked for me. Did anyone ever get a pause onmouseover working? My JS skills are non-existent and my tries have failed miserably...thanks again for the great script!

    Posted by: jhz at December 2, 2007 07:44 PM .

    Hamish said

    Can this fade function be made to operate with the onClick action? And then stop once faded to the next element?

    Posted by: Hamish at December 6, 2007 11:00 AM .

    Peter said

    Thank you for this great fading script for pictures. We love it!

    Posted by: Peter at December 6, 2007 10:11 PM .

    Lisa said

    Not sure if I missed the response, but has anyone come up with a way to use multiple crossfaders on one page?

    Posted by: Lisa at December 7, 2007 11:33 PM .

    Webdesign said

    Thanks for the super script. It works really good. Thanks for share it!

    Posted by: Webdesign at December 8, 2007 02:13 PM .

    Werbeagentur said

    Great! it works.

    Posted by: Werbeagentur at December 15, 2007 02:18 AM .

    keyton said

    Hello.
    I am Japanese.
    English can be spoken only a little.
    Please acknowledge it though it is thought that there is a part that
    cannot be read.

    Well, can you use it if in that case, there is a link from the source of JavaScript to you though want to use Javascript/CSS Crossfader on the business (Only the portal site display :)?

    My best regards though time is spent.

    Posted by: keyton at December 22, 2007 04:42 PM .