Subscribe by Email

Hey! Today I want to share with you this jQuery flip book plugin that I’ve put together. Using 3D transforms and just a little jQuery you can use it too. Below I’ll outline exactly how it works.

So I wrote this a while ago but unfortunately it was mired with bugs and problems. I decided to rewrite it to make a bit more usable for everyone, as well as give it a place where I could provide updates if I so wished. So here it is!

The Plugin

The plugin uses 3D transforms activated by jQuery to create the effect. The slides are moved around using jQuery in order to create a continuous effect, but behind the scenes things are a little bit more complex than just flipping, and to create this effect there was a lot of appending and waiting.

Using it

To begin, create your HTML. It’s going to look like this. Update the images as you see fit. The content divs are optional, but they add a little extra I think.

The image is necessary, however we don’t actually use the image, we split it up using CSS. The image you see is hidden and then the URL is put into a background CSS tag so we can manipulate it a little better. Next up, include the plugin. I’ve commented it so you can see exactly what’s going on. You also have to include the CSS so everything works correctly. Don’t forget to include jQuery!

You also want to get yourself a copy of modernizr with css 3D transforms. Don’t worry, that’s all included in the download. Modernizr will help make this at least usable in IE8.

<link rel="stylesheet" href="pictureflip.css">

Then we run the plugin. There are a few options which are as follow:

time – The time you wish the flip over animation to occur in, in seconds with no units. The default is 1 second.

shadow – Whether or not you want a shadow to appear as the flip animation occurs. It can be set to true or false. This can cause some performance issues occasionally. The default is true.

slideTime – The time for which the content of the slide will take to slide up in seconds with no units. The default is 0.1 seconds.

autorun – Can be set to true or false, and determines whether automatic flips of the slides will occur if the user is ignoring the slides. The default is false.

autoTime – The time you wish there to be between slide automatic flips in seconds. The default is 5 seconds, but if you set autorun to false this doesn’t matter.

Hello,
I’m trying to use your plugin in a site, butwhen I insert it in my index.html it doesn’t turn.It gives me this error in the Console (code inspector- Chrome):
Uncaught TypeError: Cannot call method ‘split’ of undefined jquery.pictureflip.js:383. It refers to this line:
// The current slide ID is therefore the current slide’s class attribute split to get the number
classid = $(‘.current’).attr(‘class’).split(‘ ‘)[2].split(‘-’)[1];

I must mention that when I try the demo separately it works just fine. I checked all the paths, I kept everything in place, I can’t figure out where this error comes from.
Thanks for your help