Zooming and Panning to the Image using jQuery and CSS3

Submitted by alpha_luna on Thursday, August 25, 2016 - 17:00.

We are going to create Zooming and Panning to the Image using jQuery and CSS3. This jQuery plugin is very simple to use. It allows the user to drag, pan, and zoom in/out in any elements of the web page using CSS3 and jQuery. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

How to use it

Create Markup

Create simple HTML source code for the zooming and panning of the image functionality.

<div class="buttons">
  <button class="zooming_In">Zoom In</button>
  <button class="zooming_Out">Zoom Out</button>
  <input type="range" class="zoom-range">
  <button class="reset">Reset</button>
</div>

And, create HTML Element you want to apply the zooming and panning.

<div class="parent">
  <div class="panzoom">
    <img src="http://vignette4.wikia.nocookie.net/robber-penguin-agency/images/6/6e/Small-mario.png/revision/latest?cb=20150107080404">
  </div>
</div>

jQuery Script

Kindly add this simple jQuery script below your markup to fully functional.

<script>
  (function() {
    var $section = $('section').first();
    $section.find('.panzoom').panzoom({
      $zoomIn: $section.find(".zooming_In"),
      $zoomOut: $section.find(".zooming_Out"),
      $zoomRange: $section.find(".zoom-range"),
      $reset: $section.find(".reset")
    });
  })();
</script>

Output

Learn by Examples

Examples are better than thousands of words. Examples are often easier to understand than text explanations. Hope that this simple yet useful tutorial that I created may help you to your future projects. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.