Print multiple Images on Button click using JavaScript and jQuery

Last Reply one year ago By dharmendr

Posted one year ago

Hi have more than one image.please help me how to print more than image.

<script  type="text/javascript">
function ImageReturne() {
            var div = document.getElementById("scroll").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() {
            Pagelink = "about:blank";
            var pwa = window.open(Pagelink, "_new");
            pwa.document.open();
            pwa.document.write(ImageReturne());
            pwa.document.close();
        }
        $(function () {
            var clicking = false;
            var previousX;
            var previousY;
            $("#scroll").mousedown(function (e) {
                e.preventDefault();
                previousX = e.clientX;
                previousY = e.clientY;
                clicking = true;
            });
            $(document).mouseup(function () {
                clicking = false;
            });
            $("#scroll").mousemove(function (e) {
                if (clicking) {
                    e.preventDefault();
                    var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                    var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                    $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
                    $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
                    previousX = e.clientX;
                    previousY = e.clientY;
                }
            });
            $("#scroll").mouseleave(function (e) {
                clicking = false;
            });
        });


</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" align="center">
         <div id="scroll">
                 <div id="divName" >
         <img src="CHAP_30_10_00 fig3/DEICINSYSEMPE-1.jpg" class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479" width="607" height="808" usemap="#Map" border="0" /></div>
             </div>
                     </div>
<div id="two" align="center">
          <div id="scroll">
                 <div id="divName1" >
                     <img src="CHAP_30_10_00 fig3/DEICINSYSEMPE-2.jpg"  class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479" width="610" height="820" usemap="#Map2" border="0" />
                     </div>
              </div>
         </div>

 

Posted one year ago

Hi suhaas121,

Check this example. Now please take its reference and correct your code.

HTML

<style type="text/css">
    #scroll
    {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
</style>
<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 + ")";
            $('[id*=divName]').each(function () {
                $(this).css("transform", scaleString);
            });
        })
        $('#zoomout').click(function () {
            currentZoom = currentZoom - 0.03;
            var scaleString = "scale(" + currentZoom + ")";
            $('[id*=divName]').each(function () {
                $(this).css("transform", scaleString);
            });
        })
    });
    function ImageReturne() {
        var div = document.getElementById("dvPrint").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() {
        Pagelink = "about:blank";
        var pwa = window.open(Pagelink, "_new");
        pwa.document.open();
        pwa.document.write(ImageReturne());
        pwa.document.close();
    }
    $(function () {
        var clicking = false;
        var previousX;
        var previousY;
        $("#scroll").mousedown(function (e) {
            e.preventDefault();
            previousX = e.clientX;
            previousY = e.clientY;
            clicking = true;
        });
        $(document).mouseup(function () {
            clicking = false;
        });
        $("#scroll").mousemove(function (e) {
            if (clicking) {
                e.preventDefault();
                var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
                var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
                $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
                $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
                previousX = e.clientX;
                previousY = e.clientY;
            }
        });
        $("#scroll").mouseleave(function (e) {
            clicking = false;
        });
    });
</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="dvPrint">
    <div id="one" align="center">
        <div id="scroll">
            <div id="divName">
                <img src="Images/Chrysanthemum.jpg" class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479"
                    width="200" height="200" usemap="#Map" border="0" /></div>
        </div>
    </div>
    <div id="two" align="center">
        <div id="scroll">
            <div id="divName1">
                <img src="Images/Desert.jpg" class="mapimg iborderff0c00 iradius16 iopacity10 icolorf9f479"
                    width="200" height="200" usemap="#Map2" border="0" />
            </div>
        </div>
    </div>
</div>

Screenshot