Pageflip5 documentation

Pageflip5 API

Pageflip is an extension to the famous jQuery library, currently does not supports the jQuery execution queue

There are two methods added to the jQuery library, they need to be called by selecting the Pageflip container div (div#pageflip):

  • pageflipInit()
  • pageflip()


It initializes the Pageflip engine, and displays the Book. It have 2 parameters, the Confuguration-Object and an optional alphanumeric ID which is used to create unique URL hash for the book, and added as class to the pageflip DOM parts


It returns the pageflip Context, an object with functions to control the book, this is the pageflip API. Here is the complete list of its functions:

gotoPage( ipn, skip )
Goes to Page ipn, based on internal page number, which starts with 0, and based on left-written direction. Skip is default enabled, which means the target page is reached with a single flip, instead of flipping through many pages.
gotoPageNumber( pn, skip )
Goes to Page pn, based on visible page numbers.
gotoPageName( name, skip )
Goes to Page with name set with data-page-name Page Option (the name is case insensitive).
gotoPageLabel( label, skip )
Goes to Page with label set with data-page-label Page Option (the label is case sensitive).
gotoFirstPage( isButton )
Goes to the first Page. If isButton is true, it ignores RightToLeft Option.
gotoLastPage( isButton )
Goes to the last Page.
gotoPrevPage( isButton )
Flips to previous Page.
gotoNextPage( isButton )
Flips to next Page.
Returns the Book ID if any.
Returns the actual internal page number (ipn)
Returns the actual Page's visible page number
data( ipn [, mydata] )
Returns the Page ipn's data (previously set with data-data Page option) if mydata isn't set. If mydata is provided, Page ipn's data is overwritten with that value.
mouseControl( isEnabled )
Enable/disable mouse and touch control of the book.
hotKeys( isEnabled )
Enable/disable keyboard control of the book.
startAutoFlip( [isInstant] )
Starts automatic Flipping. If isInstant is true, flipping starts immediately, or else it is delayed by the AutoFlipInterval Config Option.
Stop it.
Toggle it, useful for button calls.
setPFEventCallBack( Object )
Activates our custom Event Handler Object. This object contains functions, which will be called by pageflip, based on which event occured. See later.
Shows the thumbnails (if AutoHide is enabled)
Hide thumbnails
Zoom In if possible.
Zoom Out.
Toggle it.
Switch to fullscreen if possible.
Exit fullscreen
pageLimit( [first, last] )
Set the first and last page which are accessible by user control navigation
addPage( content [, page] )
Add one or more pages from the specified page number. content is a string containing page definition data with the same format as is was used for content setup.
removePage( [page, count] )
Removes count number of pages starting from the page specified.
closePageflip( [callback function] )
Closes pageflip, unloads the Book with a smooth fade out effect. Add a callback function as parameter to do something as the book is successfully unloaded.

Almost all functions are quite simple, and easy to understand, one of them needs more explanation, this is how the setPFEventCallBack function works.

setPFEventCallBack( EventCallBackObject )

You can pass your own Event CallBack Object to this function, to enable pageflip to call your custom event handler function. This is how an Event CallBack Object looks like:

You can write your own script for each of the event types, to handle your content depending on which of the Book's Pages are actually visible, or flipping etc. So we just defined the Event CallBack Object, now let's assign it to our pageflip: (The example shows it from the initialization of the pageflip)

The reason why is it defined before launching pageflip, is that by setting it after launching we would miss the first Page events.


When a flipping starts, both flipped Page recieves this event. The variable PN is the internal page number of the flipping Page.


When a Page finished flipping


When no flipping is in progress, the visible Pages recieves this event. This is the right time to start animations on your Page, or do anything that needed the Page to be visible.


When the Top status ends.


When the Page is added to the DOM. This is where you can initialize your Page if needed, so when it become visible, it will be ready.


When the Page is removed from the DOM. This is the last chance to access Page Content from your script.


When a Page can't be unloaded (with data-unload="false" Page Option), instead of removing the Page, it is simply hidden, and is still the part of the DOM.


When a hidden Page become visible again.


When the Page is magnified. Please note, that the page number is passed to this event handler, but the whole book is zoomed, you can flip to another page, without triggering this event anymore.


When the Page is zoomed out.