Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been updated to your website. I recommend testing in Firefox as is more lenient toward local iframe security.
To run locally in Google Chrome (on windows) :
-
Close Chrome
-
Click Start
-
Type in "run" (without quotes)
-
Click OK
-
Type in "chrome --allow-file-access-from-files" (without quotes)
-
Click OK
In your main downloaded folder from CodeCanyon you'll find the following structure:
documentation - contains documentation files
deploy - contains ready to use templates with minified javascript files
source - contains all source files (js files, css fiels and icon font files)
In the deploy folder there are html templates ready to use so the best way is to start modifying one of the examples.
Plugin usage : call the plugin with an options object as an argument.
Flipbook from images
The pages can be images (jpg or png) In this case you need to have array of pages in the options object. Each page needs to have src path, thumbnail path and a title.
$(document).ready(function () {
var options = {
pages:[
{src:"images/book1/page1.jpg", thumb:"images/book1/thumb1.jpg", title:"Cover"},
{src:"images/book1/page2.jpg", thumb:"images/book1/thumb2.jpg", title:"Page two"},
{src:"images/book1/page3.jpg", thumb:"images/book1/thumb3.jpg", title:"Page three"},
{src:"images/book1/page4.jpg", thumb:"images/book1/thumb4.jpg", title:"End"}
]
};
$("#book1").flipBook(options);
})
Flipbook from pdf
Flipbook can also be generated from a PDF file, in that case you need pdfUrl in options object, like this
$(document).ready(function () {
var options = {
pdfUrl:"pdf/magazine.pdf"
};
$("#book1").flipBook(options);
})
You can also override default options:
$(document).ready(function () {
var options = {
pages:[
{src:"images/book1/page1.jpg", thumb:"images/book1/thumb1.jpg", title:"Cover"},
{src:"images/book1/page2.jpg", thumb:"images/book1/thumb2.jpg", title:"Page two"},
{src:"images/book1/page3.jpg", thumb:"images/book1/thumb3.jpg", title:"Page three"},
{src:"images/book1/page4.jpg", thumb:"images/book1/thumb4.jpg", title:""}
],
lightBox:false,
webgl:false,
skin:"light",
zoom:.95,
zoomMin:.95
};
$("#book1").flipBook(options);
})
List of all options and default values is listed in the next chapter. It can be found in Main.as and in flipbook.min.js.
pages [Array] of page objects - this must be passed to plugin constructor. Each oage has src, thumb and title.
page object looks like this:
{ src: "pages/book1/page1.jpg", thumb: "pages/book1/thumb1.jpg", title:"Page 1"}
For example if your book has 4 pages, pages array will look like this
pages:[
{ src: "pages/book1/page1.jpg", thumb: "pages/book1/thumb1.jpg", title:"Page 1"},
{ src: "pages/book1/page2.jpg", thumb: "pages/book1/thumb2.jpg", title:"Page 2"},
{ src: "pages/book1/page3.jpg", thumb: "pages/book1/thumb3.jpg", title:"Page 3"},
{ src: "pages/book1/page4.jpg", thumb: "pages/book1/thumb4.jpg", title:"Page 4"}
]
You can add as many pages as you want. Page number should be even (4,6,8...) because each page needs to have front and back side.
pdfUrl - the url of the PDF file. If options.pages is empty, it will use the pdf to generate the pages at runtime.
pdfPageScale - scale of pdf pages that will be rendered to images, default : 1.5
skin - Strinig, "light" or "dark", default : "light"
assets - Object, defines paths to assets used in the app, default: { preloader:"images/preloader.jpg", left:"images/left.png", overlay:"images/overlay.jpg", flipMp3:"mp3/turnPage.mp3" }
rightToLeft - Boolean, defines if the book mode is normal left to right or right to left for eastern countries, default :false
startPage - int, page that will be displayed when the book starts, default:1
sounds - Boolean, defines if the sounds are enabled
pageWidth - int, page width in pixels (should be the same size as the page image width, default: 1000
pageHeight - int, page height in pixels (should be the same size as the page image height, default: 1414
thumbnailWidth - int, thumbnail width in pixels (should be the same size as the thumbnail image width, default: 100
thumbnailHeight - int, thumbnail height in pixels (should be the same size as the thumbnail image height, default: 141
contentOnStart - Boolean, if the table of content will be displayed on start, default : false
thumbnailsOnStart - Boolean, if the thumbnails will be displayed on start, default : false
mode [String] You can select either 'normal', 'lightbox' or 'fullscreen'
singlePageMode - Boolean, if single page layout will be used instead of standard double page layout
pageShadow1 (3d&2d) [Boolean] if the shadow of currently flipping page will be displayed
pageShadow2 (3d&2d) [Boolean] if the shadow of next and previous pages will be displayed
pageShadow3 [2d&2d] [Boolean] another light and shadow overlay
deepLinking [Object] default : {enabled:false, prefix:""}
deepLinking.enabled []Boolean if deeplinking will be used. With deeplining any page can be opened directly from the url.
deepLinking.prefix[text] instead of default deeplinking hash #$page_number it can be defined custom prefix so the hash will be #$prefix$page_number. For example link to flipbook page 2:
pageFlipDuration- [Number]
Mobile settings
singlePageModeIfMobile - [Boolean] if the single page view will be forced on mobile devices
pdfBrowserViewerIfMobile [Boolean] if instead of flipbook app browser will open pdf directly in its own default pdf viewer. For this option PDF url must be set.
btnTocIfMobile [Boolean]
btnThumbsIfMobile [Boolean]
btnShareIfMobile [Boolean]
btnDownloadPagesIfMobile [Boolean]
btnDownloadPdfIfMobile [Boolean]
btnSoundIfMobile [Boolean]
btnExpandIfMobile [Boolean]
btnPrintIfMobile [Boolean]
Menu settings
sideNavigationButtons [Boolean] if the side navigation buttons will be used instead of navigation buttons in bottom menu
you can override menu options and disable buttons or change icons and description.
currentPage : {
enabled:true,
title:"Current page"
},
btnNext : {
enabled:true,
title:"Next page",
icon:"fa-chevron-right"
},
btnLast : {
enabled:true,
title:"Last page",
icon:"fa-step-forward"
},
btnPrev : {
enabled:true,
title:"Previous page",
icon:"fa-chevron-left"
},
btnFirst : {
enabled:true,
title:"First page",
icon:"fa-step-backward"
},
btnZoomIn : {
enabled:true,
title:"Zoom in",
icon:"fa-plus"
},
btnZoomOut : {
enabled:true,
title:"Zoom out",
icon:"fa-minus"
},
btnToc : {
enabled:true,
title:"Table of content",
icon:"fa-list-ol"
},
btnThumbs : {
enabled:true,
title:"Pages",
icon:"fa-th-large"
},
btnShare : {
enabled:true,
title:"Share",
icon:"fa-link"
},
btnDownloadPages : {
enabled:true,
title:"Download pages",
icon:"fa-download" ,
url:"images/pages.zip"
},
btnDownloadPdf : {
enabled:true,
title:"Download PDF",
icon:"fa-file" ,
url:"images/pages.pdf"
},
btnSound : {
enabled:true,
title:"Volume",
icon:"fa-volume-up"
},
btnExpand : {
enabled:true,
title:"Toggle fullscreen",
icon:"fa-expand",
iconAlt:"fa-compress"
},
btnExpandLightbox : {
enabled:true,
title:"Toggle fullscreen",
icon:"fa-expand",
iconAlt:"fa-compress"
},
btnPrint : {
enabled:true,
title:"Print",
icon:"fa-print"
}
zoomLevels - [Array] zoom steps, default is [0.8,1,1.5,3,6]
Social share buttons
google_plus: {
enabled: true,
url: null
},
twitter: {
enabled: true,
url: null,
description: null
},
facebook: {
enabled: true,
load_sdk: true,
url: null,
app_id: null,
title: null,
caption: null,
description: null,
image: null
},
pinterest: {
enabled: true,
url: null,
image: null,
description: null
},
email: {
enabled: true,
title: null,
description: null
},
WebGL settings
cameraDistance:2800,
pan:0,
panMax:20,
panMin:-20,
tilt:0,
tiltMax:0,
tiltMin:-60,
bookX:0,
bookY:0,
bookZ:0,
pageMaterial:'phong', // page material, 'phong', 'lambert' or 'basic'
pageShadow:false,
pageHardness:1,
coverHardness:4,
pageSegmentsW:8,
pageSegmentsH:1,
pageShininess:20,
pageFlipDuration:1.5,
pointLight:false, // point light enabled
pointLightX:0, // point light x position
pointLightY:0, // point light y position
pointLightZ:2000, // point light z position
pointLightColor:0xffffff, // point light color
pointLightIntensity:0.1, // point light intensity
directionalLight:true, // directional light enabled
directionalLightX:0, // directional light x position
directionalLightY:0, // directional light y position
directionalLightZ:1000, // directional light z position
directionalLightColor:0xffffff, // directional light color
directionalLightIntensity:0.1, // directional light intensity
ambientLight:true, // ambient light enabled
ambientLightColor:0xeeeeee, // ambient light color
ambientLightIntensity:0.1, // ambient light intensity
spotLight:false, // spot light enabled
spotLightX:0, // spot light x position
spotLightY:0, // spot light y position
spotLightZ:3000, // spot light z position
spotLightColor:0xffffff, // spot light color
spotLightIntensity:.05, // spot light intensity
spotLightShadowCameraNear:0.1, // spot light shadow near limit
spotLightShadowCameraFar:10000, // spot light shadow far limit
spotLightCastShadow:false, // spot light casting shadows
spotLightShadowDarkness:0.5 // spot light shadow darkness
flipbook.style.css - css file of the app, defines layout of the elements and colors for two skins "light" and "dark"
dark skin
.bg-dark{
background: #242424;
border-top: 1px solid rgba(58, 58, 58, 1);
border-bottom: 1px solid rgba(0, 0, 0, 0.9);
}
.color-dark{
color: #D8D8D8;
}
.color-dark:hover{
color: #FFF;
}
light skin
.bg-light{
background: #DBDBDB;
border-top: 1px solid rgba(242, 242, 242, 1);
border-bottom: 1px solid rgba(197, 197, 197, 0.9);
}
.color-light{
color: #555;
}
.color-light:hover{
color: #000;
}