jQuery Plugin To Pan An Image In A Container - simplePan

simplePan is a very simple jQuery plugin which allows you to pan and zoom a large image within a small size DOM element by mouse dragging/move.

How to use it:

1. Include the required jQuery javascript library and jQuery simplePan script on your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="src/js/jquery.simple-pan.js"></script>

2. Include the jQuery mousewheel plugin if you want to zoom an image.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>

3. The required CSS styles.

.simple-pan {
overflow: hidden;
cursor: move;
}
.simple-pan .pan-image {
position: relative;
box-shadow: 0 0 5px black;
}
.simple-pan .pan-image.animate {
-webkit-transition: -webkit-transform 0.2s ease;
-moz-transition: -moz-transform 0.2s ease;
-o-transition: -o-transform 0.2s ease;
transition: transform 0.2s ease;
}

4. Call the plugin on the DIV container and set the width and height for the container via CSS option.

<script type="text/javascript">     
$(function(){
$("#simplePan").simplePan({
css: {
height: '500px',
width: '400px',
margin: '50px auto'
}
});
});
</script>

5. Available options.

<script type="text/javascript">     
$(function(){
$("#simplePan").simplePan({
css: { // Takes the CSS properties of the image container as JSON
      height: '600px',
      width: '100%'
    },
centerImage: true, // Puts the image in the center of the container when loading
mousewheel: true, // Enables mousewheel
zoomAnimate: true // Flag to toggle Animation
}
});
});
</script>

Change log:

2014-06-22

• Updates

2014-04-19

• Updates

2014-04-12

• Added image zoom feature with MOUSE WHEEL

---

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