A jQueryplugin
that sets a division to flip between text messages like a flight board at an airport.
The current version is 2.0.0 and is available
under the MIT licence.
For more detail see the documentation reference page.
Or see a minimal page that you could
use as a basis for your own investigations.
The flight board functionality can easily be added to a division
with appropriate default settings. It then displays the messages
in a cycle after two seconds.
Highlights and shadows are used to enhance the 3D effect.
Stop and restart the automatic flipping with the appropriate commands.
You can also remove the flight board functionality
with the 'destroy' command if it is no longer required.
This widget is costly when animating. I would recommend only having one per page.
This digital creative studio has a novel approach to using the
Flightboard plugin - switching images with the flip affect.
To add another example, please contact me (wood.keith{at}optusnet.com.au)
and provide the plugin name, the URL of your site, its title,
and a short description of its purpose and where/how the plugin is used.
Quick Reference
A full list of all possible settings is shown below.
Note that not all would apply in all cases. For more detail see the
documentation reference page.
$(selector).flightboard({
lettersImage: 'img/flightBoardLarge.png', // Amalgamated image for letters background
lettersSize: [25, 34], // Width and height of individual letters
lettersSeq: ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', // Positioning of letters within image
messages: ['SEE THE FLIGHT BOARD', 'CHANGE MESSAGES'], // Messages to display
maxLength: 20, // Maximum length of flight board
flips: [3, 5], // Number of flips before new value,
// may be an array with minimum and maximum flips
sequential: false, // True to step through all letters, false for random ones
speed: 500, // Time taken (milliseconds) for a single transition
repeat: true, // True to automatically trigger a new transition after a pause
pause: 2000, // Time (milliseconds) between transitions
selection: 'forward', // How to choose the next item to show:
// 'forward', 'backward', 'random'
shading: true, // True to add shading effects, false for no effects
opacity: 0.5, // Maximum opacity (0.0 - 1.0) for highlights and shadows
// Locations of the highlight/shadow images for IE
shadingImages: ['img/flightBoardHigh.png', 'img/flightBoardShad.png'],
beforeFlip: null, // Callback before flipping
afterFlip: null // Callback after flipping
});
$.flightboard.setDefaults(options) // Change global settings
$(selector).flightboard('option', options) // Change settings
$(selector).flightboard('option', name, value) // Change one setting
$(selector).flightboard('option', name) // Retrieve a setting value
$(selector).flightboard('destroy') // Remove flight board
$(selector).flightboard('stop') // Stop automatic flipping
$(selector).flightboard('start') // Start automatic flipping
$(selector).flightboard('flip', next) // Flip to next message
$(selector).flightboard('current') // Retrieve current message
$(selector).flightboard('next') // Retrieve next message
Usage
Include the jQuery library in the head section of your page.