Elementals.js

eFlipper.js

View the Demo live here

This relatively simple flipper demo lets you select and configure the image/content rotations entirely using classes. It also creates all 'scripting only' elements (like controls) from the scripting and gracefully degrades scripting off.

Usage

To include the flipper library, you simply load the eFlipper.js file right after you load elementals.js before the </body> tag thus:

<script src="../scripts/elementals.js"></script>
<script src="eFlipper.js"></script>

The script will automatically add the LINK for the default eFlipper.screen.css inside the document HEAD.

To create a 'flipper' you just put a DIV with the class 'eFlipper' on it -- and you can have multiple flippers per page. All child Elements of any Element with the .eFlipper class on it will be treated as slides to be rotated/changed. HOW that rotation is handled is entirely up to you as everything is handled with a simple set of class changes on the child elements. An example CSS set is included showing the use of images, but you could quite easily use DIV, paragraphs or any number of other content elements off this single script simply by adjusting the CSS. From this point forward each 'child' element will be referred to as a 'slide'.

It is all controlled via classes, data- attributes and CSS. You can style the controls however you like without worrying about having to modify the scripting; something many scripts fail to do as they modify the style directly -- which I consider to be sloppy programming. Apart from setting the width or rotation on something like a progress indicator, if you are using Element.style in your scripting, you're probably doing something wrong!

To configure the slideshow behavior you use the following data- attributes:

data-eFlipControls

A comma delmited list of which controls are to be shown on your flipper element. If omitted, no controls will be added to the slideshow. Possible values include:

• 'all' -- all controls are added.
• 'forwardBack' -- Shows the forward / back semi-transparent controls over the current 'slide'.
• 'pages' -- Shows the individual slide/page indicator/selectors.
• 'pausePlay' -- Show the pause/play button.
• 'progressBar' -- Show the progress bar
• 'progressTimer' -- Shows the clock-hand style progress 'spinner'

So for example if you just wanted to show the pagination controls and the rotating timer, you would declare your DIV as:

data-eFlipControls="pages,progressTimer"> flipControls_pages_progressTimer">

data-eFlipDelay

Sets the delay time between slides/pages, specified in seconds. The default if this attribute is omitted is roughly five seconds. Note the timer granularity used to run all intervales is 33ms, so the actual delay time will be rounded down to the nearest fraction of that. Why 33ms? That's the slowest we can update our animation for the progress bar without it appearing jerky.

data-eFlipPauseOnChange

Only functional when 'pages'' is included in data-eFlipControls. If you add this class when a 'slide' is chosen from the little 'page' buttons, the auto-update is stopped. It is suggested when you use this value that you also have 'pausePlay' enabled so that users can choose to resume the slideshow.

Graceful Degradation

The eFlipper.js routine will automatically add a "eFlipperLive" class to the wrapping DIV. This allows us to in the CSS trigger the absolute positioning/animations page-wide so that scripting off, each of the images are shown normally on the page. This way users witch scripting disabled won't miss out on any content. You could also use that class, or lack therein, to hide all the images so that scripting only images/behavior aren't fed to "CSS on, scripting off" users.

The scripting itself works all the way back to IE 5.x. the provided CSS will gracefully degrade in a useful fashion back to IE 6, with various details like animations disappearing in IE9 and rounded corners disappearing in IE8/earlier. OH WELL. So long as the page remains useful and functional, I suggest not bending over backwards to make it identical in outdated and outmoded browsers -- well, unless someone's willing to drop a big chunk o' change in your lap to do so.

That's kind of the point of HTML, CSS, and graceful degradation. The page should remain USABLE, that does not mean you waste time (or bandwidth) trying to create silly visual effects that do not impact functionality! ... and news flash, some slide-in/fade animations, rounded corners, and drop-shadows are NOT functionality!!!

Code explanation

First, let's just review what we said above for the markup:

<div class="eFlipper" data-eFlipControls="all" data-eFlipPauseOnChange>
	<img src="images/gallery1@480.jpg" alt="F-16XL in Level Flight" > 
	<img src="images/gallery2@480.jpg" alt="F-16XL Banking Slowly" > 
	<img src="images/gallery3@480.jpg" alt="F-16XL Parked" > 
	<img src="images/gallery4@480.jpg" alt="F-16F Parked" > 
	<img src="images/gallery5@480.jpg" alt="F-105E Parked" > 
	<img src="images/gallery6@480.jpg" alt="F-105E Climbing" > 
<!-- eFlipper --></div>

With some minor changes to the CSS those IMG tags could just as easily be DIV or any other content element. Notice it does NOT require a whole slew of extra 'containers for nothing'... Likewise should you feel that some other tag be more 'semantic' like a UL, you could just as easily use that instead of the DIV targeting the list's LI.

That's all you really need to do to use this library!