View Categories

Basic – Flipbook using HTML

< 1 min read 

Make sure you have added the basic files required for dearflip. Learn how to?

Embed Mode: #

Flipbook can be created with just a simple html syntax. Requires _df_book class to detect a flipbook.

Code:

<div class="_df_book" source="link to your pdf"></div>

Output:

Popup Modes: #

Flipbook supports 3 modes for popups, using three different class names:

  • _df_thumb : Creates a thumbnail that will open as a popup flipbook
  • _df_button : Creates a button that will open as a popup flipbook
  • _df_custom : Wraps anything inside the element to trigger a popup flipbook.

Code:

<!--Button Lightbox Usage--> 
<div class="_df_button" source="http://www.yoursite.com/books/intro.pdf"> Intro Book</div>

<!--Thumbnail Lightbox Usage Images-->
<div class="_df_thumb" 
     source="http://www.yoursite.com/books/intro.pdf"
     thumb="http://www.yoursite.com/books/thumbs/intro.jpg">Intro Book</div>

Output:

Button Example
Thumb Examples
Custom Example

Leave a Comment