Basic HTML Template - FlipBook Wordpress Plugin

HTML


    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Basic HTML Template</title>

    <!-- Flipbook StyleSheet -->
    <link href="http://www.yoursite.com/dflip/css/dflip.css" rel="stylesheet" type="text/css">

    <!-- Icons Stylesheet -->
    <link href="http://www.yoursite.com/dflip/css/themify-icons.css" rel="stylesheet" type="text/css">

    </head>
    <body>
    <div class="_df_thumb" id="df_manual_thumb" source="location of pdf.pdf" thumb="location of thumbnail.jpg"> PDF Example</div >
    <!-- Refer to other examples on how to create different types of flipbook -->

    <!-- jQuery 1.9.1 or above -->
    <script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>

    <!-- Flipbook main Js file -->
    <script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>

    </body>
    </html>

Usage

Follow the easy HTML setup (Example File: example-lightbox-as-in-demo.html)

HTML


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

    <!--Thumbnail Lightbox Usage Images-->
    <div class="_df_thumb"
    id="df_intro_thumb"
    tags="3d,images"
    source="http://www.yoursite.com/books/intro.pdf"
    thumb="http://www.yoursite.com/books/thumbs/intro.jpg" >
    Images</div >

Normally you can just use the following jQuery based syntax:

JavaScript

var flipBook = $("#flipbookContainer").flipBook(source, options);

Source is either array of image paths:

JavaScript

var source = ["img1.jpg","img2.jpg",.....];

or string link to pdf file :

JavaScript

var source = "http://www.yoursite.com/someplace/pdf-to-be-loaded.pdf";

Options are set of settings that are available for customization discussed below:

Using Images

JavaScript



    //best to start when the document is loaded
    jQuery(document).ready(function () {

    var options = {height: 400, duration: 800};

    var images = ['http://www.yoursite.com/books/thumbs/alice.jpg', 'http://www.yoursite.com/books/thumbs/dflip.jpg' ,
    'http://www.yoursite.com/books/thumbs/nightangle.jpg'];

    var flipBook = $("#flipbookContainer").flipBook(images, options);

    });

Full HTML example

HTML


    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Image Basic Example</title>
    <link rel="stylesheet" href="">
    <!-- Flipbook StyleSheet -->
    <link href="http://www.yoursite.com/dflip/css/dflip.css" rel="stylesheet" type="text/css">

    <!-- Icons Stylesheet -->
    <link href="http://www.yoursite.com/dflip/css/themify-icons.css" rel="stylesheet" type="text/css">
    <style>
    body, html {
    height:100%;
    margin:0;
    }
    </style>
    </head>
    <body>
    <div id="flipbookContainer"></div>

    <!-- jQuery 1.9.1 or above -->
    <script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>

    <!-- Flipbook main Js file -->
    <script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>

    <script>

    //best to start when the document is loaded
    jQuery(document).ready(function () {

    var options = {height: 400, duration: 800};

    var images = ['http://www.yoursite.com/books/thumbs/alice.jpg', 'http://www.yoursite.com/books/thumbs/dflip.jpg' ,
    'http://www.yoursite.com/books/thumbs/nightangle.jpg'];

    var flipBook = $("#flipbookContainer").flipBook(images, options);

    });
    </script>
    </body>
    </html>

Using PDF

JavaScript


     //best to start when the document is loaded
    jQuery(document).ready(function () {

    //uses source from online(make sure the file has CORS access enabled if used in cross domain)
    var pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';

    var options = {height: 500, duration: 800};

    var flipBook = $("#flipbookContainer").flipBook(pdf, options);

    });

Full HTML example

HTML


    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PDF Basic Example</title>
    <link rel="stylesheet" href="">
    <!-- Flipbook StyleSheet -->
    <link href="http://www.yoursite.com/dflip/css/dflip.css" rel="stylesheet" type="text/css">

    <!-- Icons Stylesheet -->
    <link href="http://www.yoursite.com/dflip/css/themify-icons.css" rel="stylesheet" type="text/css">
    <style>
    body, html {
    height:100%;
    margin:0;
    }
    </style>
    </head>
    <body>
    <div id="flipbookContainer"></div>

    <!-- jQuery 1.9.1 or above -->
    <script src="http://www.yoursite.com/dflip/js/libs/jquery.min.js" type="text/javascript"></script>

    <!-- Flipbook main Js file -->
    <script src="http://www.yoursite.com/dflip/js/dflip.min.js" type="text/javascript"></script>

    <script>

    jQuery(document).ready(function () {

    //uses source from online(make sure the file has CORS access enabled if used in cross domain)
    var pdf = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';

    var options = {height: 500, duration: 800};

    var flipBook = $("#flipbookContainer").flipBook(pdf, options);

    });
    </script>
    </body>
    </html>

DFlip jQuery Plugin

HTML

Usage

Using Images

Full HTML example

Using PDF

Full HTML example