Getting started

Use one of the template configuration as starting point, or embed Pageflip in your own website with a single tag:

<div id="pageflip"></div>

To make this tag (div#pageflip) working, link these styles and javascript files to your html document:

<link type="text/css" rel="stylesheet" href="css/pageflip.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/pageflip5-min.js"></script> <script type="text/javascript" src="js/key.js"></script>

The last step is launching Pageflip, so it will start automatically when your html page is loaded. Put this script, anywhere after the Pageflip embed tag:

<script type="text/javascript">$("#pageflip").pageflipInit( { Copyright: Key.Copyright, Key: Key.Key } );</script>

At this point the book have no content, and runs with default setting in Demo mode. In Demo mode, pageflip can only run offline.

Key Generator

With the online Key Generator you can create your own Key, all you need is your License-Key. You have to set a Copyright message, and the Domain(s) on which the book will be uploaded (add offline to the Allowed Domain list, to enable offline usage), click on the Generate Key button, and your key is ready. Then you have to copy both the Copyright text, and the Key to the key.js (located in the js folder):

var Key = { Copyright: "©2013 Iparigrafika Ltd.", Key: "ZQ8n9ytqwvhUjR4d1c" };

Pageflip can run now on your Domain.

You can add multiple domains to the list, separated with coma. You don't have to add www. before the domain name, the script automatically removes it before domain check. You can also enable all subdomains for a domain using this formula: *.pageflip-books.com (www is not a subdomain, *.pageflip-books.com doesn't includes pageflip-books.com).

For example the book running on the following URL: https://www.pageflip-books.com/demobooks/book1/ have to be enabled as domain: pageflip-books.com

Take a look at the following image, how the form is usually filled (On the image the generate button was already pressed):

Adding content to Pageflip

There is two ways of defining the content of the Pageflip book (Book):

• Add it directly as child of the embed tag
• Save it to en external HTML file

In both cases we use the same format, the only difference is its location. Here is an example of a simple Book with 8 pages defined in the embed tag:

<div id="pageflip"> <div class="cover">Cover Page1</div> <div class="cover">Cover Page2</div> <div class="page">Page3</div> <div class="page">Page4</div> <div class="page">Page5</div> <div class="page">Page6</div> <div class="cover">Cover Page7</div> <div class="cover">Cover Page8</div> </div>

If the same Book is saved in an external HTML file, the content of this file should looks like this:

<div class="cover">Cover Page1</div> <div class="cover">Cover Page2</div> <div class="page">Page3</div> <div class="page">Page4</div> <div class="page">Page5</div> <div class="page">Page6</div> <div class="cover">Cover Page7</div> <div class="cover">Cover Page8</div>

In this case you also have to set the URL of this HTML file with this Configuration Option:

PageDataFile: "yourcontent.html"

Please note, that if this Option is set, the page data in the embed tag will be overwritten.

The div's seen in these examples encloses the content displayed on the pages, and are not part of it. This means, on the pages, we now only see "Cover Page1", "Cover Page2" and so on.

We now have a rough overview of the Embedding, and setting up Content, so let's see how about the dimensions...

Pageflip dimensions

Pageflip can displayed in many ways: can have fixed size, or can be scaled, the div containig Pageflip can also have a fixed size, or can be flexible.

This is why you can make full browser sized Books, or can simply embed it into a post in a website. The Book can be scaled to fit the area available, and when scaled down to fit, you can then zoom to view it at 100%. You can add margins to let some space around the Book, just for design purposes or to give space to the Controlbar and the Thumbnails.

To better understand how Pageflip is displayed check the following figure:

The following Configuration options are controlling how the Book is displayed:

StageWidth, StageHeight

Stage size is optional. If you set it, it will be fixed (centered inside div#pageflip), otherwise will be set to 100%, and will exactly fit div#pageflip

PageWidth, PageHeight, CoverWidth, CoverHeight

The Book size is calculated from Page and Cover sizes. Cover size is optional, needed only if you want Covers to be bigger than inside Pages. The default Page size is 300x400 pixels. If the Stage is Bigger than the Book, the Book will not centered unless you enable AutoScale (AutoScale: true), and leave UpScale disabled (default setting).

AutoScale, UpScale, FullScale, FillScale, FlexibleContent

All scaling, resizing options are default turned off (false).

AutoScale enables book scaling with the Book centered on the Stage. The Zoom is only enabled, if the Book is displayed smaller then 100%, and zoom will enlarge it to 100%.

UpScale enables up-scaling, which is not recommended in HTML cause the content will be blurry, as it is a CSS transformation...

FullScale take control of the div#pageflip, and set its size to match the Browser's Window innerWidth/innerHeight.

FillScale scales the Book the way it fills the whole stage.

FlexibleContent resizes the Book the way it fills the whole stage, but the Book content is rearranged instead of scaling.

Margin, MarginTop, MarginRight, MarginBottom, MarginLeft

When scaling, positioning the Book, these margins are virtualy added to the Book's dimension

You can make space for the Controlbar, and the Thumbnails on the Stage using Margins: