1. Home
  2. Docs
  3. Advanced Customizations
  4. Store last viewed flipbook page

Store last viewed flipbook page

Experimental customizations are not included by default and are extended to the plugin. Please use with caution and proper consent.

Case:

Flipbook can open at any given page by using data-page=5 setting(second Book), or by passing through options
var options={openPage:5};

Yet, at times last open page of user can be stored and restored using further customization.


Demo:

Book 1 Manual
Book 2 Template
Book 2 will open at page 5, until user flips it, then after user location is stored and used. It resets back to page 5 once you clear data.

Process:

Lets create two popup books that have distinct id “book1” and “book2”. These id will be used to store the position of the page.

<div class="_df_button" id="book1" source="https://dearflip.com/wp-content/uploads/2019/07/dearpdf-manual.pdf">Book 1 Manual</div>

<div class="_df_button" id="book2" source="https://dearflip.com/wp-content/uploads/2019/07/glfw.pdf" data-page=5>Book 2 Template</div>

We use onCreate function to restore the last page and onFlip to store the current page in a flipbook. These are added to DFLIP.defaults variable so that every flipbook on the page uses the customization.

jQuery(function(){

    DFLIP.defaults.onCreate = function(flipbook){
        var page = localStorage.getItem(flipbook.options.id);
        if(page !==null){
            flipbook.options.openPage = page;
            console.log("Flipbook : " + flipbook.options.id + " Restored at : " + flipbook.options.openPage); 
        }
    };
    
    DFLIP.defaults.onFlip = function(flipbook) {
        console.log("Flipbook : " + flipbook.options.id + "stored at : " + flipbook.target._activePage);
        localStorage.setItem(flipbook.options.id,flipbook.target._activePage);
    };

    jQuery("#clear_data").on("click",function(){
        localStorage.removeItem("book1");localStorage.removeItem("book2");
        alert("Data Cleared Successfully");
    });

});

localStorage is used for this example. It can be changed to another library or storage location based on the requrement.

For WordPress, please read on 
How to add Custom Code to WordPress Pages

How can we help?

Leave a Comment