1. Home
  2. Docs
  3. DearFlip jQuery Flipbook Plugin
  4. Examples
  5. 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>

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

Leave a Comment