Real 3D FlipBook - WordPress Plugin

v 2.17

• created: 02/19/2014
• latest update: 05/18/2016
• by: creativeinteractivemedia
• codecanyon.net/user/creativeinteractivemedia

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. Thanks so much! Please rate the file on your downloads page if you like it!

This part of the documentation is going to cover, in a step by step instruction the installation of WP Plugins on your WordPress blog in general.

Once you have Real 3D Flipbook plugin activated you can start creating flipbooks.

Step 1 Go to plugin admin page by clicking "Real 3D Flipbook" on the left hand side of the admin page. Page 'Flipbooks' will open. Here you can create, duplicate or delete flipbooks. 

Step 2 To create a new flipbook click 'Add New' button. New page 'Edit flipbook' will open where you can create JPG Flipbook or PDF Flipbook

Step 1 Click 'Pages' then select flipbook type 'PDF'

Step 2 Select pdf file by clicking 'Select file'. Media library will open. 

Step 3 Select or upload pdf file. 

Step 4 Click 'Save chages'. Now you can preview flipbook by clicking 'Preview Flipbook'.

Step 1 Click 'Pages' then select flipbook type 'JPG'

Step 2 Click 'Add pages'. Media library will open.

Step 3 Select jpg pages from media library or upload jpg pages to media library. You can select or upload multiple pages at once, no need to upload one by one. 

Step 4 After pages are added to flipbook and you can rearrange them if needed by click and drag. You can also edit each page title.

Each page has 

Title - Page title will appear in table of content. It the page title is empty the page will not be llisted in table of content.

Image - Here  you can edit page image url. If you have a problem with page that was generated from the PDF, you can replace the page image by clicking 'select file

Thumbnail - Same as image, you can eidt thumbnail image for each page

Pages can be rearranged by click & drag. You can add more pages or delete any of the currently added pages.

HTMLContent - In this section you can add any HTML content to a page. This will be rendered on a separate layer on top of the page image.

For example you can add a link

<a href="http://www.codecanyon.net" traget="_blank">link</a>

you can add something like this

<div style="position:absolute;left:100px;top:100px;background:#CCC">

<a href="http://www.codecanyon.net" traget="_blank">link</a>

</div>

or embed iframe 

<iframe width="640" height="390" src="https://www.youtube.com/embed/tS1NCigEB_I" frameborder="0" allowfullscreen></iframe>

Simply, you can add any HTML content on the page.

If any page has HTMLContent then view mode will be automatically switched from default "webgl" to "3d"

Step 5 Click 'Save chages'. Now you can preview flipbook by clicking 'Preview Flipbook'.

General

Flipbook name [String] 

Flipbook mode [String] You can select either 'normal', 'lightbox' or 'fullscreen'. Modes are described in more detail below.

Flipbook view mode [String] You can select either 'webgl', 3d or '2d' 

Page mode [String] "singlePage" - each page is one book page, or "doubleWithCover" - pages are spreads (two book pages per page), except first and last page that are single page

Skin [String] You can select either 'light' or 'dark'

Navigation buttons on sides [Boolean] - if navigation buttons for flipping pages will be displayed

Page flip duration [Number] Duration of the flip animation

Close table of content on page click [Boolean] - default true

Deep linking [Boolean] if deeplinking will be used. With deeplining any page can be opened directly from the url.

Deep linking 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:

myflipboook.com#2

link with custom prefix "book1_page"

 myflipboook.com#book1_page2

Single page mode [Boolean] if single page layout will be used instead of standard double page layout

Normal mode

Flipbook will be displayed in a div that is 100% width of the container

Flipbook background color [String] Flipbook background color, default: #818181

Background image pattern [String] url of background image tile

Background transparent [Boolean] - if flipbook has transparent background

Flipbook height [Number] height of the flipbook container div

Fit to window [Boolean] if the flipbook container will fit the entire screen

Fit to parent div [Boolean] if the flipbook container will fit the parent div

Fit to height [Boolean] if the flipbook div will fit the parent div height

Responsive height [boolean] if the flipbook height will be responsive relative to the width

Aspect ratio (for responsive height) [Number] the ratio width / height for the responsive flipbook container

Lightbox mode

Flipbook will be opened in a lightbox after the lightbox link is clicked. Lightbox link can be text, image, or you can assign a css class that will trigger the lightbox and add that css class to any element on the page. For this mode available options are:

Lightbox element CSS class [String] CSS class that will trigger opening flipbook in lightbox. It can be class of any element on the page like menu button, divm image, text ect.

lightboxContainerCSS [String] Custom CSS that will be applied on the lightbox container (element that contains lightbox thumbnail or lightbox text)

Lighbox thumbnail url [String] image that will be added in place of shortcode and will trigger the lightbox

Lightbox Thumbnail CSS [String] CSS code that will be applied to the thumbnail (size, shadows, border ect) 

Lightbox text [String] Text that will be put in place of the shortcode and will trigger the lightbox

Lightbox text CSS [String]  CSS code that will be applied to the text link (size, shadows, border ect) 

Lightbox opens on start [Boolean] If the lightbox opens immediately when the page loads

Lightbox opens in fullscreen [Boolean] if the lightbox opening will also switch browser to fullscreen mode

Fullscreen mode

Flipbook will cover the entire page. For this mode available options are

Flipbook background color [String] Flipbook background color, default: #818181

Background image pattern [String] url of background image tile

Flipbook offset top [Number] - use to adjust vertical position of the flipbook div directly below the page menu

WebGl

Mobile

Single page view [Boolean] if the single page view will be forced on mobile devices

Use default device pdf viewer [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. 

Menu

You can enable/disable any of the buttons in the toolbar and change icon by changing the icon css class (you can use any of the font-awesome icons, to see the full list of icons go here

Social share buttons

You can add social share button by clicking button 'Add share button' and then assign icon css class, icon name, link and target. (any font-awesome icon can be used, to see the full list of icons go here)

Once you are finnished with adding pages and editing options, you need to

1. save flipbook options
2. go back to the list of all your flipbooks by clicking on 'back to flipbooks list' link.
3. copy the shortcode of the flipbook you wish to embed. The shortcode is in form [real3dflipbook id="FLIPBOOK_ID"] and FLIPBOOK_ID is a number of the created flipbook. The first flipbook you create will have shortcode [real3dflipbook id="1"], second [real3dflipbook id="2"] ect
4. paste the shortcode anywhere in your page / post. 

For quick testing

1. create a new page
2. paste the flipbook shortcode
3. click 'preview page'

Shortcode parameters

id - the id of the flipbook. The default shortcode that looks like this 

[real3dflipbook id="1"]

name - the name of the flipbook. You can embed the flipbook also with name, like this

[real3dflipbook name="flipbook1"]

pdf - you can assign (override) the pdf url that will be displayed with flipbook

if you embed flipbook with shortcode 

[real3dflipbook id="1" pdf="http://www.yourwebsite.com/1.pdf"]

it will show the pdf file that is specified in shortcode, instead of the one that is specified in flipbook options.

You can use that shortcode to show multiple PDF files using the same flipbook like this

[real3dflipbook id="1" pdf="http://www.yourwebsite.com/1.pdf"]

[real3dflipbook id="1" pdf="http://www.yourwebsite.com/2.pdf"]

Export to JSON

You can export all your books as JSON. This is useful for making a backup or moving your flipbooks to another server. To export flipbooks to JSON go to plugin anmin page 'Flipbooks' and click 'Export to JSON'. The JSON code will be generated and you can save it to a txt file.

Import from JSON

Import from JSON will remove all your current books and import flipbooks from JSON that you enter (paste) in the input field. Before clicking 'Import from JSON' make sure that you have your current flipbooks saved to JSON.

Moving to another server

You can easily move your flipbooks to another server.. You need to 

1 move all assets (images, pdf-s) to new server

2 Export flipbooks to JSON

3 edit JSON- replace all paths to pages and pdf-s in json with new paths

4 on new server import from the edited JSON

Running locally

If you test on local server you might get browser security errors because of loading local files.  For local testing please use Firefox or run Chrome with flag --allow-file-access-from-files. To do that :

On Windows, Click Start button, in the search bar type in 'run' and hit Enter

Tyoe in 'chrome --allow-file-access-from-files' and hit Enter

Now the Chrome is opened in mode that allows loading of local files.

Flipbook appears blank

If you have update the plugin from version older than 1.4.5 and you had pages generated form the pdf, you need to generate the pages again because pages were saved in the folder plugins/real3dflipbook/books that is deleted when the plugin is uninstalled. From version 1.4.5 pages are saved in wp-content/uploads.

Add pages from PDF - hangs, pages cannot be saved

Check folder premissons on your server. You can also use alternative method - 'flipbook from pdf url

Increase in php.ini max_input_vars

I put shortcode on the page but cannot see the flipbook 

Check if you have errors in the browser console. Opening the console

Firefox Use the keyboard shortcut Control-Shift-K or select 'Web Console' from the Web Developer submenu in the Firefox Menu

Chrome Use the keyboard shortcut Control-Shift-J or select  View > Developer > JavaScript Console

Check that you don't have javascript errors  caused by other plugins 

Check that you have plugin activated. If the plugin is activated plugin scripts will be loaded and you can see them in the 'scripts' tab in the dev tools.