1. Home
  2. Docs
  3. Advanced Customizations
  4. Add Custom Button to Flipbook
  5. Add Custom Zoom Reset button to Flipbook

Add Custom Zoom Reset button to Flipbook

This customization allows user to add an zoom reset button that resets the zoom of flipbook.

Demo:


Javascript Code:

<script>

  jQuery(function($){

    //bind sets the context to flipbook variable and can be accessed by 'this'
    var zoomResetButtonFunction = function(){
      var flipbook = this;
      flipbook.zoomValue =1;
      flipbook.zoom(-1);
    };

    //We add the function in Global Defaults so that all flipbooks in the page act same.
    DFLIP.defaults.onReady = function(flipbook) {

      var customZoomResetButton = jQuery('<div class="df-ui-btn  df-ui-custom-button1 ti-search"></div>');
      customZoomResetButton .on("click",zoomResetButtonFunction.bind(flipbook));

      flipbook.ui.zoomOut.after(customZoomResetButton);
      //if you want to insert in some other place.. find the button and then insert before that button

    };

  });
</script>

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

How can we help?

Leave a Comment