Remove From My Forums

scroll zoomed image

Question

User-279766093 posted

Hi i have multiple images. i'm not able to scroll or pan images individually.like i am able to pan image only 1st image. second image not able to pan or scroll please help

 <style type="text/css">
    #scroll
    {
        width: 100%;
        height: 900px;
        overflow:scroll;
    }


    
</style>
    <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("main").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="main">
    <div id="one" align="center">
        <div id="scroll">
                 <div id="divName" >
         <img src="CHAP_30_10_00 fig3/DEICINSYSEMPE-1.jpg" class="mapimg" width="607" height="808" usemap="#Map" border="0" style="overflow:hidden" /></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" width="610" height="820" usemap="#Map2" border="0" />
                     </div>
              </div>
        </div>
</div>

Tuesday, March 26, 2019 7:53 AM

All replies

0

Sign in to vote
User1520731567 posted

Hi suhaas121,

This's Unclear.

I can't see any code about can pan image only 1st image.

I just see zoom,reset and print function.

If you would like to scroll the image,I suggest you could reduce height of #scroll,like：

<style type="text/css"> #scroll { width: 100%; height: 300px; overflow: scroll; } </style>

If you have any question,please give more explanation or screenshot,so that I can understand what your mean better.

Best Regards.

Yuki Tao
Tuesday, March 26, 2019 9:32 AM
0

Sign in to vote

User-279766093 posted

As in the code earlier <div id="scroll"> is there in both image div. that is used to scroll or pan the image.

Tuesday, March 26, 2019 6:10 PM
0

Sign in to vote

User1520731567 posted

Hi suhaas121,

I did test your code,but I can't see effect about pan image only 1st image.

So,could you post screenshots so that I can understand your mean better.

Yuki Tao

Wednesday, March 27, 2019 1:59 AM
0

Sign in to vote
User-1038772411 posted

Easy way

First, let's <g class="gr_ gr_6 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="6" data-gr-id="6">cheat</g> a bit. When you will have to zoom, just multiply the height and width of your image by a factor you will decide. To have height and width into a variable (JQuery)

var height = $('#image').height(); var width = $('#image').width();

For each scroll you will receive, you will only have 2 choices. Once you are able to know if the <g class="gr_ gr_16 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="16" data-gr-id="16">mousewheel</g> goes up or down, you will just have to do something like this (JQuery)

height *= 2; width *= 2;

Less easy way

If you want to zoom in as you would do in a GMap object, you can do something like that.

var firstHeight = $('#image').height(); height *= 2; width *= 2; scalechange = (actualHeight / firstHeight) - 1; offsetX = -(coordX * scalechange); offsetY = -(coordY * scalechange); $("#image").css('top', offsetY + 'px'); $("#image").css('left', offsetX + 'px');

Be <g class="gr_ gr_32 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="32" data-gr-id="32">careful :</g> The calculation above in only to zoom-in. You will have to do some maths to get the zoom-out!

Go <g class="gr_ gr_37 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="37" data-gr-id="37">further ?</g>

Another way to go further would be to place your image in a div

<div id="imageContainer" style="overflow:hidden;"> <img id="image" src="YourImage"> </div>

By setting

"overflow:hidden;"

to your div, your image will zoom. But everything that will overflow your div will be hidden. If you set your div to the original size of your image, like this (JQuery)

$("#imageContainer").css('height', $('#image').height()); $("#imageContainer").css('width', $('#image').width());

Then you will have an image displayed that will always be at the same size, but your zoom will be effective. If you combine this to a <g class="gr_ gr_60 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="60" data-gr-id="60">drag'n'drop</g> method, you have a GMap object-like (zoom in-out, moove the zoomed image, ...)

Hope it will help someone!
Friday, March 29, 2019 5:13 AM

Asked by:

scroll zoomed image

Question

All replies