wowBook Documentation

Overview

wowBook is a jQuery plugin that let's you publish a book on your website with awesome page flipping effects.

How to use

Create a wowBook in your site requires 4 steps.

1 - Find the directory 'wow_book' that comes in the zip file you downloaded from CodeCanyon. Upload this directory to your webserver document root.

2 - Include JQuery 1.7.1, the wowBook script and the wowBook CSS on your page:

3 - Create the book content using html. Create a div to hold the book pages. Inside that div, create one div for each page of the book.

4 - Call the plugin to turn your html into a awesome wowBook!

In this example we created a the book with 500 pixels height and a 600 pixel width. Each page will have a 300 pixels width.

You can pass as many different options as you'd like by following each one with a comma (except the last one).

Check your book. Go and see each page to check if everything is fine. Since you can put any html inside the page, it's possible that some combination could 'break' the book. The best way is to check it before put it online. Look below some points that you have to consider when design a book.

Design notes

Using the wowbook API

You can use the api to have greater control over the book capabilites at runtime.

To use the api, you need to use the "$.wowBook" function to get the wowBook object related to the book you created.

				// create the book
				$("#some_element").wowBook({ 
					width: 500, height: 500
				});

				// get the book object reference
				var book = $.wowBook("#some_element");

				// now you can call methods and properties
				book.startSlideShow();
				book.stopSlideShow();
				alert("This book has "+book.pages.length+" pages.");
			

Alternatively, you can use a jqueryUI style. To call methods:

				// create the book
				$("#some_element").wowBook({ 
					width: 500, height: 500
				});
				// get the book object reference
				$("#some_element").wowBook("zoom", 1);
			

To set and get book properties:

				// get the book object reference
				$("#some_element").wowBook("prop", "pageHeight"); // return 500
				$("#some_element").wowBook("prop", "shadows", false); // disable shadows
				$("#some_element").wowBook("options", "shadows", false); // 'options' works too
			

Glossary

page index
All the pages in the book have a associate page index. The cover has index 0, the second page has index 1, and so on.
spread
two adjacent, facing pages in a newspaper, magazine, or book. In wowBook, pages on the same spread are pages that are exhibited together. The book's covers are exhibited alone, but the other pages are always viewed in pairs. Pages in the same spread are pages 1 and 2, 3 and 4, 5 and 6, and so on. The front cover (page 0) and back cover (if exist) has no other page in the spread.

Pages

Pages:

All the pages in the book have a associate page index. The cover has index 0, the second page has index 1, and so on. Some configuration options and methods accepts a negative page index. A negative page index is assumed to be relative to the end of the book — that is, an index of -1 indicates the last page, -2 is the second to last page, and so on.

onShowPage
null
function
A callback function that will be called every time a page is showed. the function will be called with parameters :
  • book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
  • page : page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
  • pageIndex : the index of the page being showed.
Important : when 2 pages are showed (the normal case), the onShowPage function will be called twice.
currentPage
integer
read only property. This property gives the page index of the current page (the visible page).Use the showPage method to change it.
pages
array
read only property. Array of page containers of the book. Each page container is a jquery Object.
insertPages
pages : a array or a JQuery object of "page content". Each "page content" can be a jquery object or a string of HTML.
dontShowPage : boolean, default to false. If false, book.showPage(currentPage) is called after inserting the pages.
inserts new pages at the end of the book.
insertPage
content : the page content, can be a jquery object or a string of HTML.
isBatchInsert : boolean, set it to true to avoid calling updateBook after the page insert.
inserts one new page at the end of the book. When inserting multiple pages, (for example, calling insertPage several times in sequence), pass isBatchInsert as true and call updateBook after you're done inserting.
removePages
from : the index of the first page to be removed.
to : the index of the last page to be removed.
Removes pages from the book. The parameters 'from' or 'to' can be a negative value, e.g. use book.remove(-1) to remove the last page. Some examples:
						book.remove();      // remove all pages from the book
						book.remove(1);     // remove the second page from the book
						book.remove(-2);    // remove the second-to-last page from the book
						book.remove(1,3);   // remove the second, third and fourth pages from the book
						book.remove(-3,-1); // remove the last, penultimate and antepenultimate pages of the book
					
updateBook
dontShowPage : boolean, default to false. If false, book.showPage(currentPage) is called after updating the book.
updates the book after insert or remove pages. Updates stuff like page numbering, sections, etc.
findPagesType
determine which pages are "softpages" and "hardpages" according to the configuration options "hardPages", "hardcovers" and pages marked with CSS class "wowbook-hardpage".
showPage
pageIndex : the index of the page to be showed.
updateLocationHash : boolean. If not false, updates the URL hash to reflect the page being shown.

Shows the page pageIndex.

By default, this method updates the URL hash to reflect the page being shown. See page_urls for more information.

Pass the parameter updateLocationHash as false(it has to be false, not a falsy value) to prevent this.

This method is not responsible for any flipping animation.

onShowPage
null
function
A callback function that will be called every time a page is showed. the function will be called with parameters :
  • book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
  • page : page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
  • pageIndex : the index of the page being showed.
Important : when 2 pages are showed (the normal case), the onShowPage function will be called twice.
advance
advances a page in the book and returns the new current page. Keep in mind that it advances 2 pages each time, ie, if currentPage is 2, after calling the 'advance' method the property currentPage will be 4.
back
back a page in the book and returns the new current page. Keep in mind that it goes back 2 pages each time, ie, if currentPage is 2, after calling the 'back' method the property currentPage will be 0.
leftPage
pageIndex : a page index, default is currentPage.
given a page index, returns the page that is on the left side of the spread at which that page index belongs. Some examples:
						book.showPage(2);
						book.leftPage(0); // returns null
						book.leftPage(); // returns 1 because currentPage==1
						book.leftPage(1); // returns 1
						book.leftPage(2); // also returns 1
						book.leftPage(3); // returns 3
						book.leftPage(4); // returns 3
					
rightPage
pageIndex : a page index, default is currentPage.
given a page index, returns the page that is on the right side of the spread at which that page index belongs. Some examples:
						book.showPage(2);
						book.rightPage(0); // returns 0
						book.rightPage(); // returns 2 because currentPage==1
						book.rightPage(1); // returns 2
						book.rightPage(2); // also returns 2
						book.rightPage(3); // returns 4
						book.rightPage(4); // returns 4
					

If there's no page on the right side of the page pageIndex, returns null.

pageIsOnTheLeft
pageIndex : a page index, default is currentPage.
returns true if the page pageIndex is on the left side of the book, false otherwise.
pageIsOnTheRight
pageIndex : a page index, default to currentPage.
returns true if the page pageIndex is on the right side of the book, false otherwise.
otherPage
pageIndex : a page index.
given a page index, returns the page index of the other page in same spread.
isOnPage
pageIndex : a page index
returns true if the book is at page "pageIndex" (if the page "pageIndex" is visible right now). For instance, when the user is viewing pages 1 and 2 of the book, isOnPage(1) and isOnPage(2) returns true, but will return false for any other page index.
backPage
pageIndex : a page index.
returns the page (NOT the page index) that is on the back of the page pageIndex.

Page flipping effects

wowBook gives you 3 types of page flipping effects:

By default, all pages are 'softpages'. There are several ways to make a page a 'hardPage':

For convenience, you can set the option 'hardcovers' to 'true' to make the book covers 'hardPages'.

hardPages
false
boolean or array
if true, all the book pages will be 'hard pages'. Also, can be an array containing the indexes of the 'hard pages'.
hardcovers
false
boolean
if true, the book will have hardcovers.
forceBasicPage
false
boolean
if true, only the basic 'page flipping' effect will be used. This option overrides any other configuration option related to "page flipping" (like hardPage option, for instance).
perspective
2000
integer
perspective's value of the CSS 3D transformation used when turning "hard pages".
turnPageDuration
1000
integer
How long it takes to flip a page, in milliseconds. Keep in mind that when centeredWhenClosed is true, the page turn will be a little faster when opening or closing the book
holdPage
page : page index or a page container (obtained from book.pages[index])
x : number, x coordinate.
y : number, y coordinate.
corner : string, can be the values "tl", "tr", "bl", "br", "l" or "r". "tl" stands for "top left", "tr" for "top right", "bl" for "bottom left", and so on. default is "tl".
back : back of the page that is being held. for instance, if you're going from page 2 to page 6, set the parameter 'back' to page 5. Default : back of the page
This method executes the page flip. Depending on the page type, it will fold or lift it like a hard cover. The idea is that you're holding the page edge and bringing it till the coordinates x,y. Make a basic processing and then calls foldPage, holdHardPage or foldPageBasic according to the type of page.
onHoldPage
A callback function that is called when a page is held. the function will be called with parameters :
  • book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
  • pageIndex : is the index of the page.
  • page : page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
  • back : back of the page that is being held. This is a page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
foldPage
page : page index or a page container (obtained from book.pages[index])
x : number
y : number
corner : string
back : back of the page that is being held.
this method folds a page. For a explanation of the parameters, see holdPage.
holdHardpage
page : page index or a page container (obtained from book.pages[index])
x : number
y : number
corner : string
back : back of the page that is being held.
this method flips a 'hard' page. For a explanation of the parameters, see holdPage.
foldPageBasic
page : page index or a page container (obtained from book.pages[index])
x : number
y : number
corner : string
back : back of the page that is being held.
this method folds a page, without using any browser advanced feature (like CSS rotation). For a explanation of the parameters, see holdPage.
animateFoldPage
page : a page container (obtained from book.pages[index]).
corner : string, can be the values "tl", "tr", "bl", "br", "l" or "r". "tl" stands for "top left", "tr" for "top right", "bl" for "bottom left", and so on. default is "tl".
from : object containing coordinates(x,y), for instance {x:10, y:20}
to : object containing coordinates(x,y), for instance {x:10, y:20}
callback : function. Callback called after the animation is completed.
arc : boolean, if set to true the page will follow a path slightly arched instead of going in straight line.
back : back of the page that is being held.
this method animates the page flip from the coordinates in the parameter "from" to the coordinates in the parameter "to"
stopAnimation
stops current 'flipping page' animation.
releasePages
releases all pages in the book, ie, it calls releasePage for all pages.
releasePage
page : page index or a page container (obtained from book.pages[index])
animated : boolean, if true, the page will be released back to her place with a animation.
back : back of the page that is being released. This has to be the same page passed initially to the method holdPage.
releases a page that is being held. It removes any changes made by the holdPage method, ie, brings back the page to same state it was before calling holdPage.
onReleasePage
A callback function that is called when a page is released. the function will be called with parameters :
  • book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
  • pageIndex : is the index of the page.
  • page : page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
  • back : back of the page that is being held. This is a page container (obtained from book.pages[index]), is the jquery object created around each page of the book.
gotoPage
pageIndex : a page index or a string containing a id, like "#foo"

Go to page pageIndex, executing a page flipping animation.

If you pass a id selector like "#foo", it will go to the page that contains the element "#foo".

If you call gotoPage during a animation or try to go to a page already visible the method does nothing.

Returns pageIndex

Automatic page numbering

Although you can put the page numbers on each book's page manually, it is easier to use the automatic page numbering feature.

Keep in mind that the number that wowBook will put on a page can be different from the page index.
pageNumbers
true
boolean
If set to true, the automatic page numbering is enabled.
firstPageNumber
1
integer
the number of the first numbered page.
numberedPages
[2,-3] or [2, -2]
string or array
Can be a string "all", in which case all the book pages will be numbered, or can be an array containing 2 elements. The first element is the page index of the first numbered page and the second element is the page index of the last numbered page. You can pass negative page indices.

By default, wowbook will number all pages except the covers (both internal and external).

doPageNumbering
Numbers the pages of the book, according to the config options pageNumbers, firstPageNumber and numberedPages.

Zoom

wowBook has a built-in zoom feature. To let your user use it, you can use the mouseWheel option or use the api to create buttons for zooming in and out.

				// create the book
				$("#mybook").wowBook({ width: 600, height: 500 });
				// get the book object
				var book=$.wowBook("#mybook");
				// make the element "zoomin" into a zoom button
				$("#zoomin").click(function(){ book.zoomIn() });
				// make the element "zoomout"into a zoom out button
				$("#zoomout").click(function(){ book.zoomOut() });
				// make the element "nozoom"  a remove zoom button
				$("#nozoom").click(function(){ book.zoom(1) });
			
zoomLevel
1
number
the initial zoom level. The default value 1 means no zoom.
zoomMax
2
number
the maximum value that the zoom level can be set.
zoomStep
0.05
number
the amount that the zoom level will change when the user zoom in or zoom out the book.
zoomBoundingBox
window
DOM, jquery selector or a jquery object
When the User's zoom in book, the book will be expanded until it occupies the entire browser window. To better adapt to your design, you can specify a bounding box to limit the area of the browser that the book occupies during zooming. The book will continue to be zoomed, but the visible part of it is limited by the boundingBox. The boundingBox element don't need be an element containing the book. During zooming, the book will be displaced and will occupy the same area of the element.
onZoom
null
function
Callback that is called after the zoom level changes. the function will be called with parameters :
  • book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
zoomLevel
number

The current zoom level, or 'how many times the book is zoomed'.

1 means no zoom, 2 means the book is magnified 2 times its normal size.

This is a read-only property, to change the zoomLevel you must use the methods zoom, zoomIn and zoomOut.

minimum value is 1, maximum value is zoomMax.

zoomWindow
jquery Object
ZoomWindow is the element that contains the book when it's zoomed. His position and dimensions are the same of the zoomBoundingBox. When the zoomed book gets bigger than the zoomWindow, only the part of the book that is inside the zoomWindow's area is visible to the user.
onZoom
Callback that is called after the zoom level changes. the function will be called with parameters :
  • book : is a book object, not the jquery element. To access the jquery element use 'book.elem'.
zoomMax
2
number
the maximum value that the zoom level can be set.
zoomStep
0.05
number
the amount that the zoom level will change when the user zoom in or zoom out the book.
zoom
level
sets the zoom level to param level.
zoomIn
step
increase the zoom level in step units. if step is not provided, the zoomStep config option is used instead.
zoomOut
step
decrease the zoom level in step units. if step is not provided, the zoomStep config option is used instead.

Slide show

slideShow
false
boolean
if true, starts the slide show automatically after the book is created.
slideShowDelay
1000
integer
time between page changes, in milliseconds.
pauseOnHover
true
boolean
if true, pauses the slide show when hover over the book.
slideShowDelay
1000
integer
time between page changes, in milliseconds.
pauseOnHover
true
boolean
if true, pauses the slide show when hover over the book.
slideShowRunning
false
boolean
when true, indicates that the slideshow is running.
startSlideShow
starts the slide show. The property slideShowDelay is the time between page changes.
stopSlideShow
stops the slide show.
toggleSlideShow
If the slideshow is running, then it is stopped. If the slideshow is not running, then it is started.

Page flip sound

wowBook uses the HTML5 audio element to play a "flipping page" sound when the user flips a page. If the user browser does not support it, nothing happens.

Changing the sound file

If you want to change the sound file it's recommended that you provide 2 versions of the file, one in mp3 format and the other in Ogg Vorbis format. Then pass those files names in the config option "flipSoundFile".

Put those files on you server and use the flipSoundFile configuration option, like this:

				$('#mybook').wowBook({
				  // ... other configuration options
				  ,flipSound     : true
				   // array with the files
				  ,flipSoundFile : ["my_sound_file.mp3", "my_sound_file.ogg" ]
				  // where are these files. This value will be prepended in each file name.
				  // Don't forget the ending "/"
				  ,flipSoundPath : "www.mysite.com/sounds/"
															 
				  // ... other configuration options
				});
			

the browser will search for the appropriate audio file format that he supports.

Using another audio player

To use another audio player, you can use the onPlayFlipSound callback to tell the player when to play the sound, like this:

				$('#mybook').wowBook({
				  // ... other configuration options
				  , onPlayFlipSound: function(book){
				    // ...
				    // code that makes your player play the flip sound
				    // ...
				    return false; // if this callback returns false, wowBook will not play the flip sound
				  }
				});
			
flipSound
true
boolean
if true, plays a 'page flipping' sound when user flip the page.
flipSoundFile
['page-flip.mp3', 'page-flip.ogg']
array of strings
Array containing the sound files.
flipSoundPath
"./wow_book/sound/"
string
The path to the folder that contains the sound files.
onPlayFlipSound
null
function
Callback called BEFORE play the flip sound. Receives the a wowBook object as parameter. If returns false the flip sound will not be played.
flipSound
true
boolean
if true, plays a 'page flipping' sound when user flip the page.
audio
the audio DOM element created to play the flipping sound.
playFlipSound
method that plays the 'page flipping' sound.

Miscellaneous

controls
a empty object
a Object

This options allows you easily to turn any element in a book's control. Configure your book like this

						$("#mybook").wowBook({
						  controls : {
						    next : '#next',
						  }
						});
					

And when the element "#next" is clicked will advance a page in the book.

All the controls available are listed in the example below.

						$("#mybook").wowBook({
						  controls : {
						    next      : '#next',     // goto next page
						    back      : '#back',     // back page
						    first     : '#first',    // goto first page
						    last      : '#last',     // goto last page
						    zoomIn    : '#zoomIn',   // zoom in
						    zoomOut   : '#zoomOut',  // zoom out
						    slideShow : '#slideShow' // starts/stop slideshow
						  }
						});
					

The control "back" will have the CSS class "wowbook-disabled" when the book is on the first page.
The same applies to the control "next" when the book is on the last page and to the control "slideshow" when slideshow is running.

keyboardNavigation
{ back: 37, advance: 39 }
object or false
use the keyboard to turn pages, set this false to disable it. Default is to use left and right arrow keys. You can customize the keys used by passing a object with the key codes that you want to use, for instance
						// set keys 'a' and 'b' to turn the pages of the book
						$("#mybook").wowBook({
						  keyboardNavigation : { back : 65, advance : 66 }
						});
					
height
300
integer
height of the book, in pixels.
width
500
integer
width of the book, in pixels. The page width will be half of this value.
startPage
0
integer
page index of the page that will be opened after start.
gutterShadow
true
booelan
When set to true, a shadow will be placed in the middle of the book (the gutter).
bookShadow
true
booelan
When set to true, a shadow will be positioned behind the book.
transparentPages
false
booelan
set it to true if you want to use pages that have a transparent background. wowBook normally hides the not visibles pages for performance reasons.
handleWidth
50
integer
Width of the handle where the user can grab the page edge and start dragging the page. The default value is set on the CSS file, but you can use this option to override it.
handleClickDuration
100
number (in milliseconds)
If user click on a handle and the click has the duration shorter that the value of handleClickDuration, turns a page. Set to 0 to disable this behavior.
shadows
true
boolean
if set to true, shadows caused by the page fold are visible when the page is folded. You may want disable this for performance reasons.
shadowThreshold
20
number in the rage of 0 and 50
the shadow appears gradually during the page flip. This options sets the threshold where the shadow starts to appear. Normally you don't need to change this, but you can play with this value to see what best fits your taste.
foldGradient
true
boolean
a gradient is put over the page when the page is folded, to give it realistic highlights and shadows. You may want disable this for performance reasons.
foldGradientThreshold
20
number in the range of 0 to 50
the page fold gradient appears gradually during the page flip. This options sets the threshold where the gradient starts to appear. Normally you don't need to change this, but you can play with this value to see what best fits your taste.
mouseWheel
false
boolean or string
can have the following values:
  • false : mouse wheel does nothing
  • "zoom" : enable zooming using the mouse wheel.
  • any other truthy value : enable changing pages using the mouse wheel.
mouseWheel
false
boolean or string
can have the following values:
  • false : mouse wheel does nothing
  • "zoom" : enable zooming using the mouse wheel.
  • any other truthy value : enable changing pages using the mouse wheel.
centeredWhenClosed
false
boolean
if true, the book will be centered when closed (showing the first or the last cover).
corners
object
read-only property, used to translate strings like "tl" into coordinates(x,y) of a page.
startPage
0
integer
page index of the page that will be opened after start.
opts
object
the object with the configuration options passed to the book.
elem
JQuery object
the JQuery object containing the DOM element passed to the plugin
id
string
the id attribute of the elem.
pageHeight
integer
height of the book, in pixels.
pageWidth
integer
width of the page of the book, in pixels
shadows
true
boolean
if set to true, shadows caused by the page fold are visible when the page is folded. You may want disable this for performance reasons.
shadowThreshold
20
number
the shadow appears gradually during the page flip. This options sets the threshold where the shadow starts to appear. Normally you don't need to change this, but you can play with this value to see what best fits your taste.
foldGradient
true
boolean
a gradient is put over the page when the page is folded, to give it realistic highlights and shadows. You may want disable this for performance reasons.
foldGradientThreshold
20
number
the page fold gradient appears gradually during the page flip. This options sets the threshold where the gradient starts to appear. Normally you don't need to change this, but you can play with this value to see what best fits your taste.
bookShadow
jquery Object
the JQuery object that contains the book shadow.
hardPageShadow
jquery Object
the JQuery object that contains the page's shadow.
leftHandle
jquery Object
the JQuery object that contains the handle that allows drag the page's edge on the left side of the book.
rightHandle
jquery Object
the JQuery object that contains the handle that allows drag the page's edge on the right side of the book.
transparentPages
false
booelan
set it to true if you want to use pages that have a transparent background. wowBook normally hides the not visibles pages for performance reasons.
selectorToPage
selector : a jQuery selector
utility function, returns the index of the page that contains the jquery selector.
positionBookShadow
This method puts the book shadow on the right position.
calculateOpacity
calculateOpacity : function(value, max, ThresholdMin, ThresholdMax) {
pageEdgeDragStart
e : jquery mouse event
method called when the user starts to drag a page edge.
pageEdgeDrag
e : jquery mouse event
method called while the user is dragging an edge of the page.
pageEdgeDragStop
e : jquery mouse event
method called when the user stops to drag a page edge.

Pages URLs

Suppose you have created a wowbook in a html page whose url is 'http://example.com/example.html', and the html used to generate the book is like this:

As you know, you can create a link to the 'http://example.com/example.html' url. You can also link to a specific element in the page by appending a fragment identifier in the url (also known as "url hash"), like "http://example.com/example.html#mybook". But in both cases the user will see the book cover.

To link to a specific page inside the book, you have to follow the format

In our example, this would become

To link to a page that contains a certain element, put the element id, like this:

The advantage in linking to a element instead of page index is that you can include or remove pages from your book, but the link still points to the correct page.

And naturally, you can create internal links on the html page that contains the book. For instance, to create a table of contents of this book you can use regular anchor tags.

deepLinking
true
boolean

if true, deep linking is enabled. When deep linking is enabled, if the URL points to a specific page of the book, this page will be shown after the site is loaded. For more details see page urls.

Also works if the URL refers to a element inside the book (as you would expect).

updateBrowserURL
true
boolean

if true, the browser url will be set to the page url when showing a page.

Navigation Browser History

Every time a user turn a page in the book, the browser url will change to the page url. That way, the navigation buttons back and forward work as expected. Also, this feature allows the user to bookmark the page he is seeing and comeback later (if the configuration option deepLinking is set to true).

Sections

You can divide a wowBook into sections by defining elements inside the book that mark a section's start. When the wowBook is showing a page that contains a 'start section element', the browser url hash will be changed to "#book_element_id/section_element_id" instead of "#book_element_id/page_index".

A practical example: suppose you created a magazine, and this magazine has an article that begins on page 3 and another one that begins on page 7. In addition, you created links to each article using the id of the h1 elements, something like this:

Normally, when the user moves from page 2 to page 3 (the first page of "article 1"), the url hash in the browser address bar is set to "#myzine/5." But if you define the element "#article1" as a section start mark, the url hash will be set to "#myzine/article1."

The advantage in using sections is that now the user can bookmark a link to article instead of bookmark a link to the page 3 of the magazine. If you want to reorder the magazine's content and move the article to the page 10, the bookmark to the article keeps valid in this case.

Advancing the pages of the book sets the the url hash to "# magazine/awesome_article/2", "# magazine/awesome_article/3," and it goes this way until the next session start. The table below shows the page index and the relative url hash.

Page indexURL Hash
0#myzine/
1#myzine/2
2#myzine/3
3#myzine/article1
4#myzine/article1/2
5#myzine/article1/3
6#myzine/article1/4
7#myzine/article_y
8#myzine/article_y/2
9#myzine/article_y/3
... and so on ...

To define sections look at the configuration option "sections".

sections
".wowbook-section"
string or array of strings

For each section that you want to define in the book, you must put a element with an id at page that the section starts. Then you pass those elements to wowBook using the configuration option "section".

Pass a array containing the ids of each element.

						$('#mybook').wowBook({
						  sections : ['#section1', '#section2']
						});
					

Pass a string containing a jquery selector. Each element that matches the selector will be considered a start's section. Remember that all elements MUST have a id.

						$('#mybook').wowBook({
						  sections : '.section'
						});
					

The default value for the option "sections" is ".wowbook-section", meaning that any element with this class inside the book will be considered a section beginning.

sectionDefinition
".wowbook-section"
string or array of strings
the section's definition, as in the configuration option "sections". If you want to change this, call the method findSections
findSections
s : a section's definition like the configuration option "sections".

Search in the book for the sections info accordingly with the definitions passed in parameter S and stores this info at the "sections" property.

If the parameter S is provided, wowBook will set the property sectionDefinition to this value and use it trough the method. Otherwise the property sectionDefinition is used as default.

Call this method when you made something that changed the sections in the book. This method already is called when a book's page is inserted or removed, use it only if you know what you are doing.

currentSection
returns the section that is being showed in the book.
pageToSection
pageIndex : index of the page
returns a object containing the section that the given page belongs.
locationHashToPage
hash : a string containing a fragment identifier. Default is window.location.hash
Converts a fragment identifier into the matching page index. For more details see page urls.
pageToLocationHash
pageIndex
Converts a page index into a fragment identifier. For more details see page urls.
						$("#awesome_book").wowBook();
						var book=$.wowBook("#awesome_book"); // get the wowBook object
						book.id; // book.id == 'awesome_book'
						// without sections
						book.pageToLocationHash(0); // returns "#awesome_book/"
						book.pageToLocationHash(1); // returns "#awesome_book/2"
						book.pageToLocationHash(2); // returns "#awesome_book/3"
						book.pageToLocationHash(3); // returns "#awesome_book/4"
						// with section 'foo' starting at page 2
						book.pageToLocationHash(0); // returns "#awesome_book/"
						book.pageToLocationHash(1); // returns "#awesome_book/2"
						book.pageToLocationHash(2); // returns "#awesome_book/foo"
						book.pageToLocationHash(3); // returns "#awesome_book/foo/2"
					

Reference

Need support ?

If you have any questions about the this plugin usage or installation, please feel free to email via my user page contact form here.

Credits

Part of the css and images used here are from DocumentUp and Rails guides.

Thank you...

...for buying this plugin. It took a huge amount of time, effort and research on it, and your purchase gives the motivation and financial support to continue this work.

Hoping that WowBook meets your expectations and helps you to create some amazing stuff.

Once again, thank you for your purchase!