jQuery Plugin For Panning An Image With Mouse Interaction - Image Panner

Image Panner is a small jQuery plugin for panning an absolute positioned image that responds to mouse movement.

How to use it:

1. Include jQuery library and the jQuery image panner plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.image.panner.js"></script>

2. Include the jQuery easing plugin for easing functions.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Include the jQuery fitToWindow plugin for resizing images to its parent container.

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

4. Wrap the image you want to pan in a container.

<div id="imageWrapper">
  <div class="container"> <img src="images/mountain.jpg" class="pan"> </div>
</div>

5. Optionally, you can create a loader to indicate the loading progress of the image.

<div id="loading">
  <img src="images/loader.gif" alt="Loader">
</div>

6. The required CSS styles for the plugin.

html,
body { height: 100%; }

body {
  margin: 0;
  padding: 0;
}

#loading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #201E20;
  z-index: 999999;
  display: block !important;
}

#loading img {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
}

#imageWrapper {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

#imageWrapper .container {
  position: relative;
  left: 0;
}

#imageWrapper .pan { position: absolute }

7. The javascript to enable the image loader.

$(window).load(function() {
$("#loading").fadeOut("1000", function() {
// Animation complete
$('#loading img').css("display","none");
$('#loading').css("display","none");
$('#loading').css("background","none");
$('#loading').css("width","0");
$('#loading').css("height","0");
});
});

7. The javascript to active the image pan functionality on the image.

$(function() {
$(".pan").fitToWindow({container:"#imageWrapper", centerImage:false, callback: function(){
$("#imageWrapper").imagePanner();
}
});
});

8. Available settings.

animSpeed : 500, // ease speed in milliseconds
easeType : "easeOutCirc", // easing options
useAnimation: true

---

This awesome jQuery plugin is developed by cultofgeek. For more Advanced Usages, please check the demo page or visit the official website.