Real 3D FlipBook - Wordpress Plugin

v 2.0

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!

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.

Step 1. The most important task is to make certain you have an upto date backup of your installation! This is always a good thing, not necessarily so important for our plugin but in general.
Step 2. Log into your WordPress Admin area.
Step 3. Look down the left hand column for “Plugins” and then click on the word “Plugins”.
Step 4. Click 'Add new and then 'Upload plugin''
Step 5. Select the the plugin zip from your PC, this is the inside the zip you had previously downloaded from CodeCanyon. Install the zip and click on "Activate Plugin".
Should you ever experience slight upload problems then please stay calm, simply use an FTP program to access your blog, then browse to /public_html/wp-content/plugins and upload the unzipped plugin here. Then check out the Plugin page and activate the plugin.

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

To go to plugin admin page click Real 3D Flipbook icon on the left hand side of the admin page or click on Real3D Flipbook or Settings > Real 3D Flipbook 

Page 'Manage flipbooks' will open. Here you can create, duplicate or delete flipbokos. You cal also see the shortcode for each flipbook that you will use to mebed the flipbook on the page.

To create a new flipbook click either 'Add New' or 'Create New Flipbook'. You will be taken to page 'Edit book' where you add pages and edit settings for the newly created flipbook.

To add pages you can either add jpg pages or add pages from PDF

Adding pages from PDF

To add pages from PDF file click button 'Add pages from PDF'. You can then select a PDF file from your wordpress media library or upload a new PDF and then select it. 

After the PDF file was selected the pages will be generated and saved on your server in folder wp_content/plugins/real3dflipbook/books/flipbook_name. After all pages have been created you can proceed with editing flipbook options. You can also add more pages, delete pages or rearrange pages with click and drag.

Flipbook from PDF url (alternative method)

To create flipbook from PDF url you need to select PDF file from your media library. This mehod will generate flipbook pages on the client side for each user so it is slower then the first method 'adding pages from PDF' that generates on the server side only once.

Adding jpg pages

To add jpg pages to your flipbook click button 'Add jpg pages'. Media library open and you can upload your jpg pages or select already uploaded pages and click select.

Pages will be added to your flipboo and you can proceed with editing flipbook options. You can also add more pages, delete pages or rearrange pages with click and drag.

Each page has 


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


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


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.



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

For example you can add a link

<a href="" traget="_blank">link</a>

you can add something like this

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

<a href="" traget="_blank">link</a>


or embed iframe 

<iframe width="640" height="390" src="" 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"

General options

Flipbook mode [String] You can select either 'normal', 'lightbox' or 'fullscreen'

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

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

Page flip duration [Number] Duration of the flip animation

Shadow of flipping page (3d&2d) [Boolean] if the shadow of currently flipping page will be displayed

Shadow of non flipping page (3d&2d) [Boolean] if the shadow of next and previous pages will be displayed

Shadow of non flipping page (3d&2d) [Boolean] if the shadow of next and previous pages will be displayed

Light overlay of pages [2d&2d] [Boolean] another light and shadow overlay 

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:

link with custom prefix "book1_page"

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

Flipbook height [Number] height of the flipbook container

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


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. 


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)


PDF page size

This will affect the resolution of generated jpg pages- larger value will generate larger jpg image, but larger images will load longer so try to find optimal ratio of quality and loading times

PDF page quality

This will affect qualilty of generated jpg pages

PDF page background color

Sometimes the page will be rendered as transparent, to fix this a background layer is added below the page and you can change color of that layer

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. publish
  4. click 'view page'

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.