Flipbook Movies with jQuery

Flipbook is a jQuery plugin that produces a movie effect by running images in quick succession. The concept is similar to something I always did in middle school: doodling in the margins of my notebooks to make short movies. Times have changed and nowadays I use a Javascript object, pulling the images dynamically with jQuery’s AJAX function and a PHP script ;). But don’t worry, it’s just as easy to use as a real flipbook.

Download the Flipbook Plugin

Watch it with Scott Joplin ragtime music.

The jQuery Flipbook Plugin is built around my jQuery slideshow tutorial. It’s very flexible, providing great options for both new and seasoned developers alike. You can easily make anything from a short film to an image slideshow to a text viewer.

Setting up Flipbook

Implementing Flipbook on your website is a piece of cake. First include the necessary Flipbook Javascript and CSS files (be sure to adjust these paths as needed):

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="flipbook.js" type="text/javascript"></script>

<link href="flipbook.css" rel="stylesheet" type="text/css" />

It is best to include these in the head of your document, but the upper part of the body should work fine as well. You can leave the Javascript alone, but we will need to make a small modification to the CSS file. Find the blocks #flipbook and #flipbook IMG within flipbook.css, and adjust the width and height to match your particular slideshow. For more detailed notes on the CSS see below.

Next we need to add the Flipbook HTML. Flipbook provides a couple of options for how to pull in the images—we can either specify a directory from where Flipbook will grab the images dynamically, provide an array of image paths, or simply place the images (or divs or paragraphs etc.) directly on the page.

Download the Flipbook Plugin

Pulling the images from a directory with AJAX

In my opinion, pulling the images from a directory is easiest. To do so, first include this bit of code:

<script type="text/javascript">
$(function() {
    Flipbook.ajaxPhp = 'flipbook.php';
    Flipbook.init( '/images/flipbook' );
});
</script>

<div id="flipbook">
Loading ...<br />
<a href="http://jonraasch.com/blog/jquery-flipbook-movies">
jQuery Flipbook</a>
</div>

Here we are using the jQuery ready function to initiate the Flipbook once the entire page has loaded. This will pull all the images in alphabetical order from the specified directory and replace the loading content in the flipbook div.

Notice that we set the variable Flipbook.ajaxPhp. This represents the location of the flipbook.php script, relative to whichever page you are on from the browser’s perspective. Since Javascript runs at the browser level, we have to use AJAX and a PHP script if we want to fetch the directory structure dynamically. Therefore you must upload flipbook.php and adjust Flipbook.ajaxPhp if you pull the images from a directory. For more advanced use of this PHP script see below.

Pulling the images using an array

However, if you don’t want to bother with the AJAX and PHP scripts, you can call the images manually using an array:

<script type="text/javascript">
$(function() {
    Flipbook.init( ['image-1.jpg', 'image-2.jpg', 'images/image-3.jpg' ] );
});
</script>

<div id="flipbook">
Loading ...<br />
<a href="http://jonraasch.com/blog/jquery-flipbook-movies">jQuery Flipbook</a>
</div>

This array stores the paths relative to whichever page you are on in the browser. You can also pass an array of directories, or a combination of directories and image paths if you need to (but then you would need the AJAX/PHP again).

Placing the images (or other markup) directly on the page

Finally, and perhaps easiest for beginners, is including a number of images directly on the page:

<script type="text/javascript">
$(function() {
    Flipbook.init();
});
</script>

<div id="flipbook">
    <img src="image-1.jpg" />
    <img src="image-2.jpg" />
    <img src="image-3.jpg" />
</div>

Notice that we passed nothing into the Flipbook.init() function; this is to prevent the Flipbook script from replacing the content of the flipbook div.

Additionally, flipbook’s versatility allows you to use divs, paragraphs, or any other piece of HTML markup instead of images here. Just make sure to adjust the CSS as necessary.

Download the Flipbook Plugin

Customizing Flipbook’s frame rate

Customizing Flipbook couldn’t be easier. To set the frame rate (the speed at which it flips between images), simply set the Flipbook.frameRate variable before you call Flipbook.init():

Flipbook.frameRate = 24;

This would run 24 images every second, or the same quality level as cinematic movies and normal Flash movies. The script does well at handling 12-24 frames per second (FPS), which is very high quality for a flipbook movie running in Javascript. Although the script has been optimized pretty well, I would never run more than 24 FPS to avoid lag on older computers (in fact the default of 8 is perfect for most flipbook-style movies).

Creative customizers can also use the frame rate to change the flipbook into a slideshow. For instance, set Flipbook.frameRate to 0.2. This will change the slide every 5 seconds. It’s simple mathematics; since the frame rate is calculated by dividing a second by the number of frames, 1 second divided by 0.2 is 5.

Flipbook’s optional fade effect

In addition to the frame rate, the Flipbook plugin for jQuery allows you to implement a fade effect between the images as they flip. Just adjust Flipbook.fadeSpeed:

Flipbook.fadeSpeed = 100;

This effect works best on slower flipbooks and slideshows. By default the fade speed is set to 0, which allows Flipbook to run better with the faster frame rates. But it’s no loss, since at these higher speeds, the fade tends to detract visually, making the animation look muddy.

Download the Flipbook Plugin

Customizing the PHP/AJAX directory listing

Flipbook’s PHP directory listing script allows you to customize a few things. By default, Flipbook’s directory listings are not recursive, meaning it searches a folder, but not any of it’s subfolders. If you would like to make the directory search recursive instead, simply uncomment line 35 in flipbook.php.

Additionally, it’s a good idea to limit the directory listing’s scope for security reasons. Although a hacker can’t necessarily do anything with only the knowledge of your directory structure, it’s very easy to block this script from spidering your entire backend. If you know that you will only want to pull images from a certain directory, modify the commented out preg_match() on line 21 appropriately.

Advanced CSS info

Developers versed in CSS can customize the Flipbook directly from the stylesheets.

The main CSS concept in these stylesheets is that we are using absolute positioning to stack all the images (or divs, etc.) within the flipbook div. Therefore we have to define absolute positioning for #flipbook IMG. Additionally, we have to define relative positioning for the wrapper div (#flipbook), so that the images position themselves within it and not a higher level wrapper.

As a side-product of this positioning, we need to set a height and width for both #flipbook and #flipbook IMG. This is due to the absolute positioning, which doesn’t force the wrapper to stretch to the height of the images.

The other main CSS concept here is that we are scrolling between images using z-index, which is the reason for the .active and .last-active classes. The opacity value is then used in conjunction with these z-indexes to allow the fade effect to run smoothly. If you are not using this effect, feel free to remove the opacity values so that the CSS validates. Just replace opacity: 0.0 with display: none and opacity: 1.0 with display: inline.

Finally, if you are using a different piece of markup than images for the flipbook, you should replace or mirror every IMG in flipbook.css with DIV or whichever tag you are using.

Download the Flipbook Plugin

An awesome flipbook

• Retweet
• Share

---

---

Tags: AJAX, animation, CSS, downloads, front-end, javascript, jQuery, object oriented, PHP, unobtrusive, video, webdev

This entry was posted on Tuesday, December 30th, 2008 at 10:54 am in the category webdev.

---

You Might Also Like:

• Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin
• Scrolling Parallax: A jQuery Plugin
• QuickFlip jQuery Plugin
• A Simple jQuery Slideshow
• Appending Style Nodes with Javascript
• TranslateThis – A Javascript Translation Widget for Noobs and Nerds Alike
• QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

---