Zoom in and Zoom out multiple Images and Print using jQuery

Last Reply 14 days ago By pandeyism

Posted 14 days ago

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>
Posted 14 days ago Modified on 11 days ago

Hi suhaas121,

Please refer below Sample.

HTML 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    var currentZoom = 1.0;
    $(document).ready(function () {
        $('#zoomin').click(function () {
            currentZoom = currentZoom + 0.03;
            var scaleString = "scale(" + currentZoom + ")";
            $('#divName').css("transform", scaleString);
            $('#divName1').css("transform", scaleString);
        })
        $('#zoomout').click(function () {
            currentZoom = currentZoom - 0.03;
            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>
<div>
    <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="http://static.flickr.com/72/199481203_ad4cdcf109_s.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="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="VERTICAL_FIN_INSTALLATION_(SHEET_2_OF_10).jpg"
                            usemap="#image1Map" id="image1" class="mapimg" /></div>
                </div>
            </div>
        </div>
    </div>
</div>

Demo