ZoomImage

by ravan

HTML

<script src="http://brandonaaron.net/javascripts/base_packaged.js"></script>
<script src="http://brandonaaron.net/javascripts/plugins/mousewheel.js"></script>
<img src='http://img3.orkut.com/images/medium/1330992162/681276290/ln.jpg' />
<img src='http://img3.orkut.com/images/medium/1330992162/681276290/ln.jpg' />

CSS

.zoomImage {
    position: absolute;
    z-index: 1000;
    box-shadow: 3px 3px 10px 1px #999;
}
/*.zoomImage {
    visibility: hidden;
}*/

JavaScript

var isRightClickDown = false;
var hasScrolled = false;

$(document).ready(function() {
    attachEvents();
});
    
function attachEvents() {
    $('img').mousedown(function(e) {
        if (e.which === 3) {
            isRightClickDown = true;
            hasScrolled = false;
            $(this).unbind('contextmenu', removeContextMenu);
        } else if (e.which === 2 && isRightClickDown) {
            zoom(this,'restore');
        }
    }).mouseup(function(e) {
        if (e.which === 3) {
            isRightClickDown = false;
            if(hasScrolled) {
                $(this).bind('contextmenu', removeContextMenu);
            }
        }
    }).mousewheel(function(event, delta) {
        if(!isRightClickDown) return;
        if(delta > 0) {
            zoom(this,'out');
        } else if (delta < 0) {
            zoom(this,'in');
        } else alert('wtf dude!');
        hasScrolled = true;
        return false;
    });
      
}

function removeContextMenu() {
    return false;
}

function zoom (el, type) {
    var percent;
    
    $(el).addClass('zoomImage');
    switch(type) {
        case 'in': {
            percent = 0.1;
            break;
        }
        case 'out': {
            percent = -0.1;
            break;
        }
        case 'restore': {
            var s = getState(el);
            if(s) {
                $(el).width(s[0] + 'px');
                $(el).height(s[1] + 'px');
                $(el).removeClass('zoomImage');
                clearState(el);
            }
        }
    };
    if(!getState(el)) { setState(el); }
    var w = $(el).width();
    var h = $(el).height();
    $(el).width(w + percent * w);
    $(el).height(h + percent * h);
}
function setState(el) {
    var w = $(el).width();
    var h = $(el).height();    
    $(el).attr('data-zoomimage',w+';'+h);
}
function getState(el) {
    var s = $(el).attr('data-zoomimage');
    if(s) {
        return s.split(';');
    } else {
        return false;
    }
}
function...