Skip to content
DearFlip – Convert PDF to Interactive 3D Flipbooks
  • Plugins
    • WordPress Flipbook
    • Joomla Flipbook
    • Javascript Flipbook
  • Demos
    • Embedded Example
    • Popup Examples
    • Online PDF Viewer
  • Pricing
  • Docs
  • Support
  • Account
  • Blog
DearFlip – Convert PDF to Interactive 3D Flipbooks
  • 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

  • Translate UI texts
  • Customize Loading
  • 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 – Flipbook using HTML

Basic – Flipbook using HTML

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

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
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
  • Embed Mode:
  • Popup Modes:

Links

  • Terms and Conditions
  • License Terms
  • Privacy Policy

Recent Posts

  • Calendar Mode(Beta) June 22, 2025
  • Best Flipbook Javascript Plugins with Pros and Cons December 16, 2024
  • PDF Partial Loading – What, How and Why? September 28, 2023
  • PDF Hyper Links are not working? What is the issue? December 17, 2021
  • How Does Flipbook Size Work and How Can I Make It Larger? May 23, 2021

Categories

  • Blog (5)
  • Flipbook PDF Related Articles (7)
  • Tutorials (5)

Examples

  • JavaScript Flipbook Popup Examples
  • DearFlip – Convert PDF to Interactive 3D Flipbooks

Explore

  • Terms and Conditions
  • License Terms
  • Privacy Policy
Thanks for the visit. Create amazing 3D Flipbooks in your Worpdress site with dFlip Flipbook Wordpress Plugin. Also Available as dFlip jQuery Flipbook Plugin. For PowerPoint related info visit Dear Slides and get free powerpoint templates.

Recent Posts

  • Calendar Mode(Beta)
  • 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 Does Flipbook Size Work and How Can I Make It Larger?

Products

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