Add Close button to ToolBar

This customization allows user to add an extra close button that closes the lightbox. This only works for Lightbox (Popup) mode.

JavaScript Code: #

<script>
jQuery(function($){

    //restrict the allControls to only "pageNumber"
    DEARFLIP.defaults.allControls="pageNumber";

    var closeFlipbook = function(){
        if(DEARFLIP && DEARFLIP.activeLightBox){
            DEARFLIP.activeLightBox.closeButton.trigger("click");
        }
    };
    
    //We add the function in Global Defaults so that all flipbooks in the page act same.
    DEARFLIP.defaults.onReady = function(flipbook) {
    
        if(flipbook.options.isLightBox === true){
        
            var customCloseButton = jQuery('<div class="df-ui-btn df-icon-close" title="Close"></div>');
            customCloseButton.on("click",function(){
                closeFlipbook();
            });
            
            //if you want to insert in some other place.. find the button and then insert after/before that button
            flipbook.ui.pageNumber.after(customCloseButton);
        }

            var customPrevButton = jQuery('<div class="df-ui-btn df-icon-arrow-left" title="Previous"></div>');
            customPrevButton.on("click",function(){
                flipbook.prev()
            });
            
            //if you want to insert in some other place.. find the button and then insert after/before that button
            flipbook.ui.pageNumber.before(customPrevButton);

            var customNextButton = jQuery('<div class="df-ui-btn df-icon-arrow-right" title="Next"></div>');
            customNextButton.on("click",function(){
                flipbook.next()
            });
            
            //if you want to insert in some other place.. find the button and then insert after/before that button
            flipbook.ui.pageNumber.after(customNextButton);
    };

});
</script>

CSS StyleSheet: #

None