Hi,
I want to zoom multiple images and print it.
Hi i have a problem which is i have 2 images with seperate div in a same page. how do i use only one zoom query. and also i have a print button where i have to print zoomed image .please help
var currentZoom = 1.0;
$(document).ready(function () {
$('#zoomin').click(
function () {
currentZoom = currentZoom + 0.03;
var scaleString = "scale(" + currentZoom + ")";
$('#divName').css("transform", scaleString);
})
$('#zoomout').click(
function () {
currentZoom = currentZoom - 0.03;
var scaleString = "scale(" + currentZoom + ")";
$('#divName').css("transform", scaleString);
})
});
function myprint() {
var divone = document.getElementById('one');
divone.style.display = 'none';
window.parent.frameright.focus();
window.print();
}
<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 class="main dragscroll">
<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>
<div id="two" style="text-align: center;">
<div class="main dragscroll">
<div class="wrapper">
<div id="divName1">
<img src="VERTICAL_FIN_INSTALLATION_(SHEET_2_OF_10).jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_2_OF_10).jpg"
usemap="#image1Map" id="image1" class="mapimg" /></div>
</div>
</div>
</div>
</div>