Skip to content
DearFlip JS Flipbook
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog
DearFlip JS Flipbook
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog

Getting Started

  • Getting started
  • File Structure & Template
  • Basic Usages
  • Options List

FAQs

  • Support and FAQs
  • License Activation
  • Why are there PHP files in download zip file?

Examples

  • Examples
  • Basic – Flipbook using HTML
  • Basic – Using options
  • Adding Outline/Table of Content
  • Adding Search

Customizations

  • onPageChanged
  • Customizations
  • Open flipbook in full-screen
  • onReady Function
  • PDF links custom class and usages
  • Update URL hash on the address bar when a page flips
  • How to add custom share button?

Advanced Customizations

  • Add Close button to ToolBar
  • Advanced Customizations
  • Store last viewed flipbook page
  • Add Custom Button to Flipbook
  • Add Custom Download button to Flipbook
  • Add print button to flipbook
  • Add Custom Zoom Reset button to Flipbook
  • Thumb animation on page scroll
  • Load more button for lightboxes
  • Reset flipbook zoom on flip
View Categories
  • Home
  • Documentation
  • Examples
  • Basic – Using options

Basic – Using options

Adding Options to Flipbook: #

If you want to add options to the flipbooks you create you need to :

  1. Add id to the flipbook element. Example id="my_flipbook"
  2. Register a related option variable based on the id. Example var option_my_flipbook = {};

Code:

<div class="_df_button" 
     id="my_flipbook"
     source="http://www.yoursite.com/books/intro.pdf"> Intro Book</div>
<script>

var option_my_flipbook = {webgl:false};

</script>
Open Book

Output:

Flipbook with Custom option

JavaScript variable can be added anywhere just make sure it’s available before page load.

Element id : button_pdf, option variable name : option_button_pdf


Global Options: #

If you have multiple flipbook and they all share same options. You can rather set Global values using DFLIP.defaults. It affects all flipbook on the page. For safety run the script in jQuery ready function.

Code:

<div class="_df_button" 
     source="http://www.yoursite.com/books/intro.pdf"> Book One</div>
<div class="_df_button" 
     source="http://www.yoursite.com/books/intro.pdf"> Book Two</div>
<script>

jQuery(function(){

DFLIP.defaults.backgroundColor = "gray";

});

</script>

Output:

Flipbook 1
Flipbook 2
Updated on September 12, 2023

More Inquiry/Info & COMMENTS:

All DearFlip comments and discussion have been moved to
https://github.com/dearhive/dearflip-js-flipbook/discussions

Table of Contents
  • Adding Options to Flipbook:
  • Global Options:

Links

  • Terms and Conditions
  • License Terms
  • Privacy Policy

Recent Posts

  • Best Flipbook Javascript Plugins with Pros and Cons
  • PDF Partial Loading – What, How and Why?
  • PDF Hyper Links are not working? What is the issue?
  • How flipbook size works? How to make it bigger?
  • Customizing Buttons

Products

  • DearFlip WordPress Flipbook
  • DearFlip 3D Flipbook JS Plugin
  • Online PDF Viewer
  • DearFlip PDF Flipbook for Chrome
© 2025 | A product of DearHive.com