Hi guys i have image which will zoom but not able pan the image. and when i print the image nothing gets printed. it ll be blank.please help
<script type="text/javascript">
var currentZoom = 1.0;
$(document).ready(function () {
$('#zoomin').click(function () {
currentZoom = currentZoom + 0.01;
var scaleString = "scale(" + currentZoom + ")";
$('#divName').css("transform", scaleString);
// $('#divName1').css("transform", scaleString);
})
$('#zoomout').click(function () {
currentZoom = currentZoom - 0.01;
var scaleString = "scale(" + currentZoom + ")";
$('#divName').css("transform", scaleString);
// $('#divName1').css("transform", scaleString);
})
});
function ImageReturne() {
var div = document.getElementById("one").innerHTML;
var firstFunc = function step1() { setTimeout('step2()', 10); }
var secondFunc = function step2() { window.print(); window.close() }
var getImages = "<html><head><script>\n" + firstFunc + "\n" + secondFunc + "</scri" + "pt></head><body onload='step1()'>\n" + "'" + div + "" + "</body></html>";
return getImages;
}
function myprint() {
debugger;
Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(ImageReturne());
pwa.document.close();
}
</script>
<nav class="navbar-fixed-top navbar-default">
<button type="button" id="zoomin"> <span class="glyphicon glyphicon-zoom-in"></span> Zoom In</button>
<button type="button" id="zoomout"> <span class="glyphicon glyphicon-zoom-out"></span> Zoom Out</button>
<button type="button" onclick="document.location.reload(true);" value="Reload Page"> <span class="glyphicon glyphicon-repeat"></span> Reset</button>
<button type="button" onclick="myprint()"> <span class="glyphicon glyphicon-print"></span> Print</button>
</nav>
<div id="one" style="text-align: center;">
<div class="wrapper">
<div id="divName">
<img src="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_1_OF_10).jpg" id="image0" usemap="#image0Map" class="mapimg" />
</div>
</div>
</div>