jQuery image panning within a container > ZOOM IN/OUT CONTROL

by lasha

HTML

<div class="container">
    <!-- <img src="http://placekitten.com/g/500/300"> -->
    <img src="http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg" width="600" height="375">
</div>
<div class="hoverMessage">HOVER ME</div>

<span class="zoomIn">ZOOM IN</span><br>
<!-- <span class="zoomOut">ZOOM OUT</span> -->

CSS

.container {
    position: relative;
    width: 600px;
    height: 375px;
    background: #ccc;
/*     margin-top: 50px;
    margin-left: 100px; */
    cursor: pointer;
    overflow: hidden;
}

img {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    height: auto;
}

.zoomedImg {
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-in-out;
}

.container:hover .zoomedImg {
    opacity: 1;
}

.hoverMessage {
    display: none;
    position: absolute;
    top: 60px;
    left: 100px;
    padding: 50px;
    background: #fff;
    color: #000;
}

JavaScript

var $container = $(".container"),
    containerWidth = $container.width(),
    containerHeight = $container.height();

var $containerImg,
    containerImgWidth,
    containerImgHeight;

var zoomedImgLoaded = false;

//var $containerImg = $container.find("img"),
//    containerImgWidth = $containerImg.width(),
//    containerImgHeight = $containerImg.height();
    
var offset = $container.offset();

var panTimer;

function panImage(left, top, width, height, $containerImg){
    clearTimeout(panTimer);
    panTimer = setTimeout(function(){
        $containerImg.stop().animate({
            left: -(left / containerWidth) * (containerImgWidth - containerWidth),
            top: -(top / containerHeight) * (containerImgHeight - containerHeight)
        }, 70, "linear");
    },10);
}

$(".zoomIn").on("click", function(e){
    if(!zoomedImgLoaded){
        var img = $(document.createElement('img'))
        img.addClass("zoomedImg");
        img.attr('src', "http://wallpaper-fullhd.com/wp-content/uploads/2013/03/at-the-beach-hd-wallpaper-1920x1200.jpg");
        img.load(function(){
            $container.append(this);
            $containerImg = $container.find(".zoomedImg"),
            containerImgWidth = $containerImg.width(),
            containerImgHeight = $containerImg.height();
           zoomedImgLoaded = true;
            
            $container.on("mousemove.artZoom", function(e){
              $(".hoverMessage").fadeOut('fast'); // BAD BAD BAD BAD BAD BAD BAD
              var offsetLeft = e.pageX - offset.left;
              var offsetTop = e.pageY - offset.top;
              console.log("panned");
              panImage(offsetLeft, offsetTop, containerImgWidth, containerImgHeight, $containerImg);
            });
            
            $(".hoverMessage").fadeIn('fast');
        });
    } else {
        $containerImg = $container.find(".zoomedImg");
        containerImgWidth = $containerImg.width(),
        containerImgHeight = $containerImg.height();
   ...