Overview

Junior high was spent doodling in the top left corner of my school notebooks making little flipbook animations. These mostly involved stick figures running, falling, and some red ink for the splatters. Here is the web 2.0 incarnation of these junior high doodles - with more science and less splatter.

FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.

Other features include:

set the animation speed
change animation direction
exclude specific images
single step through the images
resizes to fit the images

You can see a nice example of a FlipBook just below. Keep on reading for instructions on how to download and use FlipBook for your own website.

Using

Creating a FlipBook could not be easier. All you need to provide is a <div></div> for the FlipBook widget and a list of the image sources to animate. In the example below we are applying a FlipBook to the div with the "flipbook" id, and we are supply a list of ten images to animate. The images are animated in the sequence they are given.

$('#flipbook').flipbook({
    images: [
        'images/img_01.png',
        'images/img_02.png',
        'images/img_03.png',
        'images/img_04.png',
        'images/img_05.png',
        'images/img_06.png',
        'images/img_07.png',
        'images/img_08.png',
        'images/img_09.png',
        'images/img_10.png'
    ]
});

You can also change the set of images the FlipBook is animating after the widget has been created. This allows your users to load a different data set without requiring a page reload. The following snippet of code demonstrates this functionality.

$('#flipbook').flipbook('options', 'images', [
    'images/img_01.png',
    'images/img_02.png',
    'images/img_03.png',
    'images/img_04.png',
    'images/img_05.png',
    'images/img_06.png',
    'images/img_07.png',
    'images/img_08.png',
    'images/img_09.png',
    'images/img_10.png'
]
});

FlipBook is a jQuery UI widget which means it can be themed using ThemeRoller. It also means that you will need to include the jQuery javascript file in your page along with the jQuery UI javascript and CSS files.

FlipBook works with jQuery 1.3.2 and jQuery UI 1.7.2. It has been tested on IE7, IE8, Safari 4, Firefox 3.5, and Chrome. If it works in any other browser then it is a complete surprise to me!

You can find the FlipBook source code and download packages on the GitHub development page. Please use the GitHub issue tracker to report any bugs and to make feature requests. You can also contact the author through the GitHub site. GitHub is pretty nice!