CSS Codes
CSS Layouts

<html>
<head>
<style>

/* demo styles. Remove if desired */
#pcontainer1{
width: 600px;
height: 400px;
}

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

</style>

<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
***********************************************/

</script>

<script>

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

</script>
</head>

<body>

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

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

</body>
</html>