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.resetZoom();
    };

    //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>

Before version 2.0

<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>