Non-Flash Flip Book [Cross-Browser]

Question

I am starting a new project and my main home page element will be a Flip Book.

I prefer staying away from Flash and HTML5.

The problem is that I am having a hard time finding a Full Cross Browser Jquery/Javascript Flip Book that has the capability of the CLICK AND DRAG event. (I don't want a normal click and flip.)

Does anyone have or know of a full cross browser Click and Drag Flip Book?

OR if you have an example, not cross browser, what alternative cross browser overrides would be best to use?

Solution 1

Here is a link with a few choices :

http://cssnerd.com/2011/12/08/animated-css3-pageflip-flipbook-with-a-little-jquery/

On the page you will see :

jQuery version (that @Arno posted)

• They updated it on August 8, 2012 and is looking much better
• Works on iPad
• IE7 & IE8 some shading issues when paging (im not even gonna test IE6)
• http://builtbywill.com/code/booklet/

Pure CSS3 version

• Only works on Chrome (and buggy on Safari)
• Smooth page flip, but too limited
• http://www.romancortes.com/ficheros/page-flip.html

HTML5 version (coz we can't ignore the non-crossbrowser html5 anymore)

• It only gives the example : http://www.20thingsilearned.com
• Here is the proper tutorial : http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip/

3d flipbook without a HTML5 canvas version

• Major performance issues
• http://webkit-os.pixelass.com/flipbooktest/

Solution 2

Perhaps missed out as it was not available at the time, I've had great success (due to it's simplicity) with Turn.js

It's also got a HTML4 version, so it's not only HTML5.