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
#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.
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:
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 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:
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:
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.
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.frameRate = 24;
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 = 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.
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 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
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.