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>For WordPress, please read on How to add Custom Code to WordPress Pages