Keybind for mousewheel to arrow keys

**jundo12** · 10-03-2014, 07:16 PM

Not sure what category this fits in, but i'd like to make it so the mousewheel is represented on my webpage (it's not on the internet atm) by the up and down arrow keys instead. this could get a little snarky though, as i have a mousewheel zoom script on the page for zooming into a very large image, that i want to transfer use of, from the mousewheel to the up and down arrow keys on the keyboard. in other words, as long as i'm pressing the up arrow or the down arrow, the image zooms in or out, smoothly, without clicks. since i can't show you the code as it isn't on the net yet, i was wondering if there is a standard script for making mousewheel events happen with the up and down arrow keys on the keyboard instead of the mousewheel? and if the fact the mousewheel controls are themselves being called to a different purpose (zooming into an image) than default scrolling, if it's possible to reference an already in specialized use item like that, and transfer its ability to the keyboard up and down arrows.

i know, it's a mess lol but the mousewheel zoom script is smooth like silk. all the other zoom methods seem choppy and laborious, as you would be constantly clicking to zoom, and i'd need smoooooth scrolling into the image. what's unique about this zoom script is that it keeps the image centered so zooming doesn't result, in your browser window looking at the upper left hand corner of the image, instead of the middle.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery.iviewer test</title>
        <script type="text/javascript" src="jquery.js" ></script>
        <script type="text/javascript" src="jqueryui.js" ></script>
        <script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
        <script type="text/javascript" src="jquery.iviewer.js" ></script>
        <script type="text/javascript">
            var $ = jQuery;
            $(document).ready(function(){
                  var iv1 = $("#viewer").iviewer({
                       src: "test_image.jpg", 
                       update_on_resize: false,
                       zoom_animation: false,
                       mousewheel: false,
                       onMouseMove: function(ev, coords) { },
                       onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
                       onDrag: function(ev, coords) { }
                  });

                   $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
                   $("#out").click(function(){ iv1.iviewer('zoom_by', -1); }); 
                   $("#fit").click(function(){ iv1.iviewer('fit'); }); 
                   $("#orig").click(function(){ iv1.iviewer('set_zoom', 100); }); 
                   $("#update").click(function(){ iv1.iviewer('update_container_info'); });

                  var iv2 = $("#viewer2").iviewer(
                  {
                      src: "test_image2.jpg"
                  });

                  $("#chimg").click(function()
                  {
                    iv2.iviewer('loadImage', "test_image.jpg");
                    return false;
                  });
            });
        </script>
        <link rel="stylesheet" href="jquery.iviewer.css" />
        <style>
            .viewer
            {
                width: 115%;
                height: 140%;
                border: 1px solid black;
                position: relative;
            }
            
            .wrapper
            {
                overflow: hidden;
            }
        </style>
    </head>
    <body bgcolor="#000000">
 


       <h1></h1>
        <!-- wrapper div is needed for opera because it shows scroll bars for reason -->
  

      <div class="wrapper">
            <span>
                <a id="in" href="#"></a>
                <a id="out" href="#"></a>
                <a id="fit" href="#"></a>
                <a id="orig" href="#"></a>
                <a id="update" href="#"></a>
            </span>
           </div>
            <br />
            
<div id="viewer2" class="viewer" style="position: absolute; left: 0%; top: 0%; right: 0%" ></div>
            <br />
            <p><a href="#" id="chimg"> </a></p>
        </div>
    </body>
</html>

**jscheuer1** · 10-04-2014, 06:40 PM

If these work:

Code:

                   $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
                   $("#out").click(function(){ iv1.iviewer('zoom_by', -1); });

You can use them like so:

Code:

$(document).keydown(function(e){
	switch(e.keyCode){
		case 38: {//up arrow
			iv1.iviewer('zoom_by', 1);;
			break;
		}
		case 40: {//down arrow
			iv1.iviewer('zoom_by', -1);;
			break;
		}
		default: {
			return;
		}
	}
	e.preventDefault();
});

**jundo12** · 10-05-2014, 12:51 AM

well there was, at one point, a + and - above the image to be zoomed AND
a + and - below the image to be zoomed. i removed the top ones but the bottom ones had already vanished, the moment i put the script on my page, and i assume these are the ones you're referring to? i have no idea why they didn't show up to begin with. i just removed the + and -, nothing else and the bottom ones were already invisible so removing the + and - for the zoom feature was irrelevant.

i put your script in. the arrow keys on the keyboard are supposed to control the zoom now, correct? when i press the up arrow on keyboard, nothing happens. what am i doing wrong?
you can see it in its page here: (warning big image, slow loading)
http://thelivingmoon.com/undomiel/game/index1a.html

**jundo12** · 10-05-2014, 01:38 AM

p.s. the arrow keys do move the image left or right, up or down, in chrome, but not in ff, not to mention, i was hoping the up and down arrow keys could be used to do what the mousewheel is doing -- et.al, zooming into the image, and even in chrome, the arrow keys are not doing that. they are just moving the whole image around the screen, instead of zooming into it or out of it.

**jscheuer1** · 10-05-2014, 01:46 AM

Probably some sort of conflict and/or syntax snafu. When I have more time, I will investigate.

**jundo12** · 10-05-2014, 01:58 AM

Originally Posted by jscheuer1

Probably some sort of conflict and/or syntax snafu. When I have more time, I will investigate.

thanks so much.

**jscheuer1** · 10-05-2014, 02:01 AM

OK, iv1 only exists within the scope of the document ready function where it was defined. And in addition, it appears that iv2 is the one you are actually using. It is also of the same limited scope. So, let's first get rid of this from your demo:

Code:

<script>
$(document).keydown(function(e){
	switch(e.keyCode){
		case 38: {//up arrow
			iv1.iviewer('zoom_by', 1);;
			break;
		}
		case 40: {//down arrow
			iv1.iviewer('zoom_by', -1);;
			break;
		}
		default: {
			return;
		}
	}
	e.preventDefault();
});

</script>

And add the highlighted to it as shown:

Code:

        <script type="text/javascript">
            var $ = jQuery;
            $(document).ready(function(){
                  var iv1 = $("#viewer").iviewer({
                       src: "test_image2.png", 
                       update_on_resize: false,
                       zoom_animation: false,
                       mousewheel: false,
                       onMouseMove: function(ev, coords) { },
                       onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
                       onDrag: function(ev, coords) { }
                  });

                   $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
                   $("#out").click(function(){ iv1.iviewer('zoom_by', -1); }); 
                   $("#fit").click(function(){ iv1.iviewer('fit'); }); 
                   $("#orig").click(function(){ iv1.iviewer('set_zoom', 300); }); 
                   $("#update").click(function(){ iv1.iviewer('update_container_info'); });

                  var iv2 = $("#viewer2").iviewer(
                  {
                      src: "test_image2.png"
                  });

                  $("#chimg").click(function()
                  {
                    iv2.iviewer('loadImage', "test_image2.png");
                    return false;
                  });
                  $(document).keydown(function(e){
			switch(e.keyCode){
				case 38: {//up arrow
					iv2.iviewer('zoom_by', 1);;
					break;
				}
				case 40: {//down arrow
					iv2.iviewer('zoom_by', -1);;
					break;
				}
				default: {
					return;
				}
			}
			e.preventDefault();
		});
            });
        </script>

The browser cache may need to be cleared, and/or the page reloaded to see changes.

Any questions or problems, just let me know.

**jundo12** · 10-05-2014, 02:40 AM

Originally Posted by jscheuer1

Any questions or problems, just let me know.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-

equiv="Content-Type" content="text/html; charset=utf-8" />
     

   <title>Interface: Space</title>
 


       <script type="text/javascript" src="jquery.js" 

></script>
        <script type="text/javascript" 

src="jqueryui.js" ></script>
        <script 

type="text/javascript" src="jquery.mousewheel.min.js" 

></script>
        <script type="text/javascript" 

src="jquery.iviewer.js" ></script>
        <script 

type="text/javascript">
            var $ = jQuery;
            

$(document).ready(function(){
                  var iv1 = 

$("#viewer").iviewer({
                       src: 

"test_image2.png", 
                       update_on_resize: 

false,
                       zoom_animation: false,
            

           mousewheel: false,
                       

onMouseMove: function(ev, coords) { },
                       

onStartDrag: function(ev, coords) { return false; }, //this 

image will not be dragged
                       onDrag: 

function(ev, coords) { }
                  });

                  

 $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
    

               $("#out").click(function(){ iv1.iviewer

('zoom_by', -1); }); 
                   $("#fit").click

(function(){ iv1.iviewer('fit'); }); 
                   

$("#orig").click(function(){ iv1.iviewer('set_zoom', 300); }); 
                   $("#update").click(function(){ iv1.iviewer

('update_container_info'); });

                  var iv2 = 

$("#viewer2").iviewer(
                  {
                      

src: "test_image2.png"
                  });

                  

$("#chimg").click(function()
                  {
                

    iv2.iviewer('loadImage', "test_image2.png");
               

     return false;
                  });
  });
 

  $(document).keydown(function(e){
			switch(e.keyCode){
				case 38: {//up arrow
					iv2.iviewer('zoom_by', 

1);;
					break;
				}
				case 40: {//down arrow
					iv2.iviewer('zoom_by', 

-1);;
					break;
				}
				default: {
					return;
				}
			}
			e.preventDefault();
		});
       </script>
  


      <link rel="stylesheet" href="jquery.iviewer.css" />
      

  <style>
            .viewer
            {
                

width: 115%;
                height: 140%;
                

border: 1px solid black;
                position: relative;
    

        }
            
            .wrapper
            {
         

       overflow: hidden;
            }
        </style>
    



</head>
    <body bgcolor="#000000">




 

<div id="test_image2"
onclick="location.href='hub.html';" style="cursor: pointer;">





       <h1></h1>
        <!-- wrapper div is needed for opera 

because it shows scroll bars for reason -->
  

      <div class="wrapper">
            <span>
                

<a id="in" href="#"></a>
                <a id="out" 

href="#"></a>
                <a id="fit" href="#"></a>
         

       <a id="orig" href="#"></a>
                <a 

id="update" href="#"></a>
            </span>
           </div>
  

          <br />
            
<div id="viewer2" class="viewer" style="position: absolute; 

left: 0%; top: 0%; right: 0%" ></div>
            <br />
        

    <p><a href="#" id="chimg"> </a></p>
        </div>
 





<div style="position: absolute; left: 95%; top: 85%; right: 

13%">
<!-- Generated by AudioPlay Online Generator 

(http://www.strangecube.com/audioplay/) --><div><object 

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/fl

ash/swflash.cab#version=10,0,0,0" width="30" 

height="30"><PARAM NAME=movie 

VALUE="http://www.strangecube.com/audioplay/online/audioplay.s

wf?

file=http://thelivingmoon.com/undomiel/interface/earth/hangar.

mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strang

ecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000

000&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM 

NAME=wmode VALUE=transparent><embed 

src="http://www.strangecube.com/audioplay/online/audioplay.swf

?

file=http://thelivingmoon.com/undomiel/interface/earth/hangar.

mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strang

ecube.com/audioplay/online/alpha_buttons/classic&bgcolor=0x000

000&mode=playpause" quality=high wmode=transparent width="30" 

height="30" align="" TYPE="application/x-shockwave-flash" 

pluginspage="http://www.macromedia.com/go/getflashplayer"></em

bed></object></div><!-- End of generated code -->

</div>


   </body>
</html>

Well now ff moves the image with the arrow keys, but still doesn't zoom in with the up arrow key nor zoom out with the down arrow key. did i miss something ? there's the code