Problems with panzoom library and window.print () in asp.net

Question

I have a button bar , three of which are for the use of image zoom and scroll in it and the fourth is to send print the image, through the library gets done panzoom zoom and scroll , but if command print ( sent successfully ) .Now if I return to the site and I want to zoom , do not, what should I do to allow me to continue to handle the image ??

<section>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-12 btn-group">
                            <button type="button" class="zoom-in btn btn-default">
                                <span class="glyphicon glyphicon-zoom-in"></span>
                            </button>
                            <button type="button" class="zoom-out btn btn-default">
                                <span class="glyphicon glyphicon-zoom-out"></span>
                            </button>
                            <button type="button" class="reset btn btn-default">
                                <span class="glyphicon glyphicon-resize-full"></span>
                            </button>
                            <button name="printButton" id="printButton" type="button" class="btn btn-default" onclick="printDiv('printableArea')" runat="server">
                                <span class="glyphicon glyphicon-print"></span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="panzoom">
                        <div id="printableArea">
                            <img src="img/descarga.jpg" alt="Visualización del original de la forma migratoria" class="img-responsive">
                             <script type="text/javascript">
                                 function printDiv(divName) {
                                     var printContents = document.getElementById(divName).innerHTML;
                                     var originalContents = document.body.innerHTML;
                                     document.body.innerHTML = printContents;
                                     window.print();
                                     document.body.innerHTML = originalContents;
                                 }
                        </script>
                        </div>   
                    </div>
                </div>
            </div>
            </section>

and the part of panzoom is

(function () {
    var $section = $('section').first();
    $section.find('.panzoom').panzoom({
    $zoomIn: $section.find(".zoom-in"),
    $zoomOut: $section.find(".zoom-out"),
    $zoomRange: $section.find(".zoom-range"),
    $reset: $section.find(".reset")
   });
   })();

Answer 1

My solution was to redo everything from panzoom as shown in the following code , but I have a problem , nose like a function call within another function that I have defined , so I save the copy-paste

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
    window.onfocus = function () {
    window.close();
}
var $section = $('section').first();
$section.find('.panzoom').panzoom({
    $zoomIn: $section.find(".zoom-in"),
    $zoomOut: $section.find(".zoom-out"),
    $zoomRange: $section.find(".zoom-range"),
    $reset: $section.find(".reset")
});
};