jPageFlip is a jQuery plugin to simulate the turning of book pages. To use jPageFlip jQuery.js must be included. The current version has been tested with jQuery version 1.4.2. jPageFlip is highly configurable, see the config section below. Further extensions of the configuration options are planned for the next version. jPageFlip is currently based on the "canvas technology", which is only suported by Firefox, Chrome, Opera and Safari, at least in their latest versions. Internet Explorer 8 (IE8) does not support the canvas technology, this will only come with IE9.

Starting with jPageFlip version 0.9.5 transparent and semi-transparent images are supported. A first version of HTML5-Video support (.ogv(Theora) & .mp4) is implemented but has not yet passed the experimental stage.


To use jPageFlip, images of one group must be put inside a div container that is annotated with an id, e.g. id="myPageFlip". All images musst belong to the class "jPageFlip", i.e. class="jPageFlip". 
   <div> id="myPageFlip">
     <img src="images/clearpage.gif" class="jPageFlip">
     <img src="images/bild01.jpg" class="jPageFlip">
     <img src="images/bild02.jpg" class="jPageFlip">
     ...
     <img src="images/bild10.jpg" class="jPageFlip">
   </div>


The plugin is activated the following way: 
   <script type="text/javascript">
     $(document).ready(function(){
       $('#myPageFlip').jPageFlip({
         // parameters
       });
     });
   </script>
left
(default: 0) 		horizontal image displacement withing the canvas container
(e.g.: left : 30)
top
(default: 0) 		vertical image displacement withing the canvas container
(e.g.: top : 50)
shadowWidth
(default: 20) 		width of the shadow in the middle of the book.
shadowOpacity
(default: 0.7) 		Alpha value of the shadow in the middle of the book
(value range: 0 - 1)
flipOnClick
(default: true) 		Enable/disable page flip when clicking the lower corner of a page.
animationSpeed
(default: 10) 		Page flipping speed.
animationDynamic
(default: 10) 		Smoothness of the animation. A higher value is less CPU-intensiv, but the effect is less fluid.


Note: the current version of jPageFlip is a beta version and should not yet be used for production quality pages.


Changelog
0.9.6 (03.09.2010)
  • Preloading images improved. Up to version 0.9.5 img.onload events were used to load images ahead.
    (In Webkit-browsers with Javascript engine works img.onload limited.)
0.9.5 (02.08.2010)
  • Support for transparent und semi-transparent images
  • Integration of HTML5-Video (status: alpha version)
0.9.4 (01.08.2010)
  • Removed back flipping errors that occured for some mouse pointer positions.
  • Eradicated performance problems with Safari.
  • Fixed problem, where images did not appear during first call of a page.
0.9.3 (25.07.2010)
  • Implemented smooth page flipping (configurable)
0.9.2 (19.07.2010)
  • Implemented shadow in the middle of the book (configurable)
  • Implemented page flip when clicking on the lower corner of a page (optional)
  • Preloading of the opening image to avoid JS errors in Safari.
  • Reduced performance problems in Safari
  • Cursor adjusted
0.9.1 (15.07.2010)
  • First version

To come
- dynamic background
- full support for HTML5 - video (jPageFlip 0.9.5 contains an first, experimantal version)



Comment (Comments will appear after review)

Name
Email*
Text