Crossfader v0.1 Documentation
I'm back at it. I figured I would post up how this thing works since I have had such a great response just from the demo. We first need to step back and really define what this thing is before we can start talking about what it can do and how I got the the demo.
Crossfader Defined
This script is designed to take a series of div containers all within a div and show their contents one by one. The first div is loaded when the page loads by which ever method you prefer, ruby, php, static html, it doesn't really matter. Each subsequent div is loaded after the page loads via ajax (This script uses the scriptaculous and prototype libraries). When we switch between one div and the next we perform a transition, not an effect. The transition in this case is a cross fade, hence the name. Now each div can contain anything, and I mean anything from a form to an image to a video if you want. I have also included a number of tools to allow you to build out player controls, add overlays into the transitions and also a navigational element (all shown in the demo). Whats even cooler about this thing is that css completely defines the look and feel of the crossfader.
So lets dive right in!
The basics of this thing are pretty simple, first you need to include the prototype, scriptaculous, and crossfader files at the beginning of your file. Now that you have done that now lets see how we create the html for this bad boy.
HTML:
-
<!-- start \\ foobar Crossfader -->
-
<div id="foobar"> <!-- start \\ OPTIONAL Player Controls -->
-
<a id="foobar-reverse" class="foobar-reverse" onclick="javascript: Crossfade.playerTools('foobar', 'reverse', null); Crossfade.togglePlayPause('foobar', 'pause');"><span>«</span></a> <a id="foobar-play" class="foobar-play" onclick="javascript: Crossfade.playerTools('foobar', 'play', null); Crossfade.togglePlayPause('foobar', 'play');"><span>play</span></a> <a id="foobar-pause" class="foobar-pause" onclick="javascript: Crossfade.playerTools('foobar', 'pause', null); Crossfade.togglePlayPause('foobar', 'pause');"><span>pause</span></a> <a id="foobar-forward" class="foobar-forward" onclick="javascript: Crossfade.playerTools('foobar', 'forward', null); Crossfade.togglePlayPause('foobar', 'pause');"><span>»</span></a> </div>
-
<!-- end \\ OPTIONAL Player Controls --> <!-- start \\ Loading Animation --> <img border="0" id="foobar-fade-box-loading" class="fade-box-loading" src="images/loading.gif" alt="" /> <!-- end \\ Loading Animation -->
-
<div id="foobar-0" class="foobar-fade-box"> <!-- start \\ Contents --> <!-- end \\ Contents --> </div>
-
<!-- start \\ Additional Frames -->
-
<!-- end \\ Additional Frames --> <!-- start \\ OPTIONAL Tabs -->
-
<div class="foobar-tabs">
-
</ul>
-
</div>
-
<!-- end \\ OPTIONAL Tabs --> </div>
-
<!-- end \\ foobar Crossfader -->
So you will notice right off the bat there ae two optional blocks of code above for the Player Controls and Navigation Controls. We will come back to these a little later.
- Set up a container to hold the div frames as well as the optional Player Controls and Navigation Controls. In the example above our container is
HTML:
HTML:
Notice how we set all of the frames(fade-box) to have a style of display: none except for the first one. This has to be done as so that if javascript is enabled or not the first frame(fade-box) at least will show to the user. We call this gracefully degrading a feature.
CSS:
-
/* Define Frame */ #foobar .fade-box{ /* Required */ position: absolute; height: ###px; width: ###px; /* Required */ }
JavaScript:
-
function init(){ /* container : string : id of container url : string : url to pass the container # to in order to get the contents count : integer : the number of containers 0-4=5 interval : the interval between transitions totaloverlays : integer : the number of overlays toggleoverlays : boolean : whether or not to toggle the overlays in and out of the transition tabs : boolean : to use navigation or not */ Crossfade.init('foobar', '/crossfader/jpg/', 5, 5000, 2, true, false); } window.onload = init;
Have a Beer or a glass of Wine...
That's right, enjoy a tasty beverage and pat yourself on the back. What... it's not pretty enough? It works, isn't that enough? Ok ok...
Overlays
So overlays are pretty simple, they are pieces of text that you may want to overlay with a frame on transition or just place next to it or whatever (like the demo). The CSS is up to you but you get the idea from the demo, though there are two important things you have to do.
- Below is a sample fromt he demo of what I have for every frame, aside from the content changing.
HTML:
Notice how we set the class of the overlay div to fade-box-overlay-# where # is overlay set (in the example we have 2, 0 and 1) and the id is foobar-##-fade-box-overlay-# where ## is the frame number.
- Now just set the totaloverlays to something besides 0 and there you go. Now optionally you can set a true/false value to toggleoverlays to tell the crossfader to be included/excluded in the transition. Now I turn it on in my demo because one of the overlays is on a transparent layers and i cannot set a background color and in IE the anti-aliasing gets all mussed up otherwise (just a good example of when to turn it on).
Player Controls
Almost done, now we can talk about player controls. So there are two functions that do the meat of the work.
JavaScript:
-
/* This function actually runs the controls for the player, forward, reverse, or even goto a specific frame container : string : id of container direction: string : 'forward' or 'reverse' or 'goto' frame : integer : the fade-box to 'goto' */ Crossfade.playerTools('foobar', 'reverse', null); /* This function actually toggles the play/pause button for a good interface so when someone presses play, it turns to pause or vice-versa container : string : id of container button: string : 'play' or 'pause' */ Crossfade.togglePlayPause('foobar', 'pause');
Below are the implementations in the demo that I used for the player controls and the tabs (yes the tabs are just player controls), it works well i think.
HTML:
-
<!-- start \\ Player Controls -->
-
<a id="news-reverse" class="reverse" onclick="javascript: Crossfade.playerTools('foobar', 'reverse', null); Crossfade.togglePlayPause('foobar', 'pause');"><span>«</span></a> <a id="news-play" class="play" onclick="javascript: Crossfade.playerTools('foobar', 'play', null); Crossfade.togglePlayPause('foobar', 'play');"><span>play</span></a> <a id="news-pause" class="pause" onclick="javascript: Crossfade.playerTools('foobar', 'pause', null); Crossfade.togglePlayPause('foobar', 'pause');"><span>pause</span></a> <a id="news-forward" class="forward" onclick="javascript: Crossfade.playerTools('foobar', 'forward', null); Crossfade.togglePlayPause('foobar', 'pause');"><span>»</span></a> </div>
-
<!-- end\\ Player Controls --> <!-- start \\ Tabs -->
-
<div class="fade-box-tabs">
-
</ul>
-
</div>
-
<!-- end \\ Tabs -->
The loading animation
I threw this in behind the fade-box's for a nice effect, completely optional.
Conclusion
Now at this stage you are either supa happy or wondering why on earth you have to put html together and why its not generated. This is because this is a tool, not a pre-made piece of code. You really can do a lot with this depending on what you include and how you style it.
Please offer up suggestions or improvements or ideas on some more demos I can throw together. Thanks guys, and check back soon!
Jan 23rd 2007
thanks
very nice and sleek. good joobs.
I would just apply some unobstructive events for the onclick..
Jan 23rd 2007
I had a couple in there but I didn’t see much use for them as far as the player goes and depending on what your building you may or may not want them. In the case of the demo ideally you would want the onclick event to take you to the story where as on a simple slide show you may just want a mouseover event to pause the show?
Jan 29th 2007
Is there any way to determine how many recent comments it displays?
Jan 29th 2007
Judith-
I am not sure what you are asking… comments it displays? Do you mean the overlay’s? Give me an example of what you are trying to do and I will see what I can do.
Apr 19th 2007
Very nice,
although it doesn’t work in IE6.
It breaks down during the loading of the page.
At some point you call Enumerable.each and it fails inside the try/catch.
Very weird.
I think it happens because either the dom or the images are not loaded yet.
I noticed a similar error with the lightWindow when my browser doesn’t have a player for the media type and I get prompted for the download.
here is the error.
$(”lightWindow-photo-galleries”) has no properties
http://localhost:3002/javascripts/lightWindow.js?1176997774
Line 727
if (this.galleryToggle) $(’lightWindow-photo-galleries’).style.display = ‘block’;
the second statement should be in a try/catch.
Oct 9th 2007
I would sure like to try your crossfader js, but I get an error page when I click on the download link:
“Nothing to see here
You seem to have found a mislinked file or page.”
Hope you still have it available! It looks awesome .
L.
Oct 14th 2007
Hey,
Great effects. Any way you can put the files back up? The link doesn’t seem to be working.
Thanks.
Dec 5th 2007
I managed to find the link, since nothing has been done about it. It is here:
http://stickmanlabs.com/crossfader/javascript/crossfader-0.1.js
Feb 25th 2008
Can you please put the demo for this back up?