/* demo styles. Remove if desired */
width: 600px;
height: 400px;

@media screen and (max-width: 780px){ /* responsive setting */
width: 100%;
height: 400px;


<link rel="stylesheet" href="imagepanner.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.kinetic.min.js" type="text/javascript"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="imagepanner.js">

* Simple Image Panner and Zoomer v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more



var panimage1 // register arbitrary variable
panimage1 = new imagepanner({
wrapper: $('#pcontainer1'), // jQuery selector to image container
imgpos: [100, 300], // initial image position- x, y
maxlevel: 4 // maximum zoom level



<div id="pcontainer1" class="pancontainer">
<img src="mercedes.jpg" width="1280px" height="782px" />

<br />
<button onClick="panimage1.zoom('+1')">zoom In</button> <button onClick="panimage1.zoom('-1')">zoom out</button> <button onClick="panimage1.zoom(1)">reset</button>