[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1694
  • Last Modified:

jQuery PanZoom

Hi

Does anyone know if you can use buttons for the panzoom panning instead of dragging on this:
https://github.com/timmywil/jquery.panzoom

Thanks
0
coolispaul
Asked:
coolispaul
  • 4
  • 3
  • 2
1 Solution
 
Meir RivkinFull stack Software EngineerCommented:
yes u can, here the html i used that worked for me with the buttons.
the only file i used is jquery.panzoom.min.js in the same folder of the html.

<!doctype html>
<html>
  <head>
    <title>Panzoom for jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      section { text-align: center; margin: 50px 0; }
    </style>
  </head>
  <body>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="jquery.panzoom.min.js"></script>
    <section>
      <h1>Panning and zooming with CSS3</h1>
      <div id="panzoom" style="text-align: center">
        <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
      </div>
    </section>
    <section class="buttons">
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range">
      <button class="reset">Reset</button>
    </section>
    <script>
      $("#panzoom").panzoom({
        $zoomIn: $(".zoom-in"),
        $zoomOut: $(".zoom-out"),
        $zoomRange: $(".zoom-range"),
        $reset: $(".reset")
      });
    </script>
  </body>
</html>

Open in new window

0
 
coolispaulAuthor Commented:
Hi sedgwick

Where are the left/right/up/down buttons?

Thanks
0
 
Meir RivkinFull stack Software EngineerCommented:
u didn't say anything about left/right/up/down buttons.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
coolispaulAuthor Commented:
yeah i meant buttons for panning not zooming

I want to create left/right up /down buttons instead of the dragging...

Thanks
0
 
Meir RivkinFull stack Software EngineerCommented:
<!doctype html>
<html>
  <head>
    <title>Panzoom for jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      section { text-align: center; margin: 50px 0; }
    </style>
  </head>
  <body>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="jquery.panzoom.min.js"></script>
    <section>
      <h1>Panning and zooming with CSS3</h1>
      <div id="panzoom" style="text-align: center">
        <img src="http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg" width="900" height="900">
      </div>
    </section>
    <section class="buttons">
		<button onclick="panleft()">Left</button>
		<button onclick="panright()">right</button>
		<button onclick="pantop()">up</button>
		<button onclick="panbottom()">bottom</button>
      <button class="zoom-in">Zoom In</button>
      <button class="zoom-out">Zoom Out</button>
      <input type="range" class="zoom-range">
      <button class="reset">Reset</button>
    </section>
    <script>
      $("#panzoom").panzoom({
        $zoomIn: $(".zoom-in"),
        $zoomOut: $(".zoom-out"),
        $zoomRange: $(".zoom-range"),
        $reset: $(".reset")
      });
	  
	  function panleft(){
		$('#panzoom img').animate({
			marginLeft: "-=0.5in"
		}, 1000, function() {
		});
	  }
	  
	  function panright(){
		$('#panzoom img').animate({
			marginLeft: "+=0.5in"
		}, 1000, function() {
		});
	  }
	  
	  function pantop(){
		$('#panzoom img').animate({
			marginTop: "-=0.5in"
		}, 1000, function() {
		});
	  }
	  
	  function panbottom(){
		$('#panzoom img').animate({
			marginTop: "+=0.5in"
		}, 1000, function() {
		});
	  }
    </script>
  </body>
</html>

Open in new window

0
 
coolispaulAuthor Commented:
ok thnaks that works nicely,

there seems to be some delay but i can fiddle with this

Thanks
0
 
hankknightCommented:
This is now officially supported!

In response to this request, the author of this jquery.panzoom created official support for this:

https://github.com/timmywil/jquery.panzoom/commit/6a735238f98f7cc3283f07d14a3b0eb56bf7b4bb
jq.panzoom.js
0
 
hankknightCommented:
Here is a working example using the latest official code:

http://jsfiddle.net/timmywil/Khvrj/2/
0
 
coolispaulAuthor Commented:
Great thanks
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now