Configuration
Pageflip is configured by a javascript Object, named Configuration Object. The easiest way is to define this object inline, as parameter of the PageflipInit method, like in this example:
Please note, that all Config Options are inside the braces, Option: Value paires are separated with coma (No coma after last Option: Value pair).
As the Configuration Object is a Javascript Object, You can define it elsewhere, or make it dynamic.
Sizes of the Book
The first thing is to set the size of the Pages (PageWidth, PageHeight), it is up to you which dimensions or aspect ratio you choose. You can also set the Book cover larger than the Pages (CoverWidth, CoverHeight). These settings and horizontal/vertical (VerticalMode) flipping mode will determine the size of the Book.
In most cases, it depends on the target environements, where pageflip will be embedded, or maybe on the content size. Whatever is the case, there's a setting for it.
The zooming strongly depends on the chosen page size, as in HTML you can't upscale without quality loss, just like with an image
To enable the zoom feature, set higher Page sizes than the target Stage, and enable AutoScale, this way your book will be scaled down in normal view to fit inside the Stage, and you can zoom to view then Book in 100%
Size parameters have to be divisible by 2 to avoid unwanted page movement effect when starting a flip.
Configuration Options
Full list of available Configuration Options with default values. Description is about the enabled Option, no matter its default value. Enabled means true, or any value other than false, like a number or string, depending on the Option.
Book options
PageWidth: 300
Width of the Pages
PageHeight: 400
Height of the Pages
CoverWidth
Optional, width of the Cover Page
CoverHeight
Optional, height of the Cover Page
StageWidth: "100%"
Optional, width of the Stage
StageHeight: "100%"
Optional, height of the Stage
MarginRight
Book Margin-Right
MarginBottom
Book Margin-Bottom
MarginLeft
Book Margin-Left
BookOffsetX: 0
Book's offset-x on the Stage
BookOffsetY: 0
Book's offset-y on the Stage
HardCover: true
Cover Page flipped like Hard cover
HardPages: false
All pages are flipped like Hard pages
CenterSinglePage: false
Centers single pages: front and back covers
AutoScale: false
Book is scaled automatically to fit inside the Stage
ScaleToSinglePage: false
The Book is scaled automatically so a single page can fit inside the Stage (used with Offset)
AutoStageHeight: false
The Stage height is adjusted automatically depending on the displayed Book's size.
AutoMaxHeight: false
The Stage height is adjusted automatically depending on the browser's inner height OR the displayed book's height. (from version 1.4)
MaxHeightOffset: 0
AutoMaxHeight is reduced by this amount (used to keep some space above/below the Stage). (from version 1.4)
UpScale: false
You can enable up scaling of the book, but not recommended
FullScale: false
Resizes the div#pageflip to fill the browser
FillScale: false
Scales the Book to fill the Stage
FlexibleContent: false
Resizes the Book, and its pages, the content is rearranged
FlexibleContentMinWidth: 768
The minimum width of the flexible content. If the Stage is narrower, content will be scaled down.
Content related options
PageDataFile
External content HTML file URL
SinglePageMode: false
Enable single page mode (no facing pages, only a single page always, from version 1.3)
AutoSinglePageMode: false
Enable single page mode selection by Pageflip, depending on the screen size and aspect ratio (from version 1.45)
VerticalMode: false
Enable vertical flipping mode
RightToLeft: false
Right to Left written Book display
AlwaysOpened: false
Book is Always opened, can't close the book to view Front cover.
Transparency: false
Enables transparent Pages. Transparent Pages have to be individually marked as transparent using Page Options, see next part of the documentation.
Design related options
DropShadow: true
Adds dropshadow to the book. Shadows are set up with CSS styles
DropShadowOpacity: 0.3
CSS opacity value for the DropShadow
NoFlipShadow: false
Disables shadows on the flipping Pages
FlipTopShadowOpacity: 0.3
CSS opacity value for the shadow rendered on top of the flipping page
FlipShadowOpacity: 0.3
CSS opacity value for the shadow rendered behind the flipping page
HardFlipShadowOpacity: 0.3
CSS opacity value for the shadow rendered on top of the hard-flipping page
Emboss: true
Enable/disable emboss effect rendered on top of non-hard pages
EmbossOpacity: 0.3
CSS opacity value for the emboss effect
Thumbnails: false
Enables Thumbnail display
ThumbnailsLazyLoad: true
Enables lazy loading of the thumbnail images: thumbnails are loaded only when they are visible (from version 1.3)
ThumbnailsToFront: false
Place Thumbnails in front of the Book
ThumbnailsAutoHide: 0
Enables Auto-hiding Thumbnail display. 0: Auto-hide disabled, >0: set Auto-hide timer
ThumbnailsHidden: false
Start Pageflip with Thumbnails hidden
ThumbnailWidth: 60
Thumbnail Page width
ThumbnailHeight: 80
Thumbnail Page Height
ThumbnailAlwaysCentered: false
Actual Page Thumbnail is always centered to the Book
DisableSelection: false
If enabled, no HTML content can be selected on the Stage
ShowCopyright: false
Enables displaying the copyright text set in the key.js file - html tags can be added to it, like links, images, etc.
Controlling options
StartPage: 1
The Book starts opened at this Page
MouseControl: true
Enable/disable Mouse and Touch control of the Book
HotKeys: true
Enable/disable Keyboard control of the Book (Arrow keys navigation, and Z,T,A to toggle Zoom, Thumbnails, and Autoflip)
ControlbarFile
External Controlbar HTML file
ControlbarToFront: false
Place Controlbar in front of the Book
PagerText: "Page #~Pages #–#"
Page display text. # sign is the placeholder of the Page Number to be displayed
PagerSkip: true
Skip Pages when Page number/name is entered manually via the Pager input field
HashControl: false
Allow navigation using URL Hash, by updating it when changing Page. With this feature enabled you can use browser's back/forward buttons to navigate through previously visited Book Pages, or you can share the URL pointing to the actual page.
ZoomEnabled: true
Enable zooming if the Book scale is lower than 100%
ClickZoom: false
Enable zooming in/out by a single click on the page from version 1.2 (compatible with on-page links/buttons from 1.3)
PinchZoom: true
Enable pinch-zooming on multitouch devices (1.3)
FullScreenEnabled: false
Enable FullScreen button on browsers supporting native fullscreen display.
FlipDuration: 800
Duration of the flipping animation, in milliseconds (800 = 0.8 seconds),
Preflip: true
Enables pre-flipping when hover Book corners
PreflipArea: 128
The size of the pre-flip area, from the corner
SecondaryDragArea: 64
Drag area width from the sides of the Book
InsideDragArea: 0
Inside Drag area width from the center of the Book
AutoFlipEnabled: true
Enables Auto-flipping by pressing button on the Controlbar, or by pressing key "A"
StartAutoFlip: false
Auto-flipping book, like slide-show
AutoFlipInterval: 2000
Interval between Auto-flips, in milliseconds (2000 = 2 seconds),
AutoFlipLoop: 0
Auto-flipping loop.
-1: no loop, but goes back to the first Page after finish.
0: no loop, stay on the last Page,
1: loop enabled, flips through the Book over and over again.
NavigationLoop: false
Looping pages when using control bar navigation buttons (1.3.1)
MinPageLimit
Disable access to pages before this page number
MaxPageLimit
Disable access to pages after this page number
Unlocking options
Do not change these options, unless you know what you do! By default they are referencing variables in js/key.js file, which values are generated with the online Key Generator.
Copyright: Key.Copyright
Copyright text
To unlock your Pageflip book on a domain, please update the js/key.js file.
Sharing options
Pageflip5 have 4 social buttons (Twitter, Google+, Facebook, Pinterest). By pressing them, you can share the informations below on each channel (in your browser, Pageflip5 didn't launches default Apps on hosting OS).
ShareLink:
"https://pageflip-books.com"
Social button shares this link.
ShareText
With this message
ShareImageURL
Pinterest image URL
