画像の拡大鏡を実装するやつ

Result

※画像が大きいので少し表示に時間かかります

jQuery

(function($) {
    $.fn.easyZoom = function(options) {
        //デフォルト値
        var defaults = {
            id: 'easy_zoom',
            parent: 'body',
            append: true,
            preload: 'Loading...',
            error: '画像のロードに失敗しました'
        };
        var obj;
        var img = new Image();
        var loaded = false;
        var found = true;
        var timeout;
        var w1, w2, h1, h2, rw, rh;
        var over = false;
        var options = $.extend(defaults, options);
        this.each(function() {
            obj = this;
            // a要素のみに機能させる
            var tagName = this.tagName.toLowerCase();
            if (tagName == 'a') {

                var href = $(this).attr('href');
                img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
                $(img).error(function() {
                    found = false;
                });
                img.onload = function() {
                    loaded = true;
                    img.onload = function() {};
                };
                 //マウスポインタの指定とクリックイベント
                $(this).css('cursor', 'crosshair').click(function(e) {
                    e.preventDefault();
                }).mouseover(function(e) {
                    start(e);
                }).mouseout(function() {
                    hide();
                }).mousemove(function(e) {
                    move(e);
                });
            };
        });
        function start(e) {
            hide();
            //ズーム画像を表示させるボックスを作る
            var zoom = $('<div id="' + options.id + '">' + options.preload + '</div>');
            if (options.append) {
                zoom.appendTo(options.parent);
            } else {
                zoom.prependTo(options.parent);
            };
            if (!found) {
                error();
            } else {
                if (loaded) {
                    show(e);
                } else {
                    loop(e);
                };
            };
        };
        function loop(e) {
            if (loaded) {
                show(e);
                clearTimeout(timeout);
            } else {
                timeout = setTimeout(function() {
                    loop(e)
                }, 200);
            };
        };
        function show(e) {
            over = true;
            $(img).css({
                'position': 'absolute',
                'top': '0',
                'left': '0'
            });
            $('#' + options.id).html('').append(img);
            w1 = $('img', obj).width();
            h1 = $('img', obj).height();
            w2 = $('#' + options.id).width();
            h2 = $('#' + options.id).height();
            w3 = $(img).width();
            h3 = $(img).height();
            w4 = $(img).width() - w2;
            h4 = $(img).height() - h2;
            rw = w4 / w1;
            rh = h4 / h1;
            move(e);
        };
        function hide() {
            over = false;
            $('#' + options.id).remove();
        };
        function error() {
            $('#' + options.id).html(options.error);
        };
        function move(e) {
            if (over) {
                // 取得した画像の処理
                var p = $('img', obj).offset();
                var pl = e.pageX - p.left;
                var pt = e.pageY - p.top;
                var xl = pl * rw;
                var xt = pt * rh;
                xl = (xl > w4) ? w4 : xl;
                xt = (xt > h4) ? h4 : xt;
                $('#' + options.id + ' img').css({
                    'left': xl * (-1),
                    'top': xt * (-1)
                });
            };
        };
    };
})(jQuery);
//セレクタ指定
$('a.zoom').easyZoom();

もうスニペットとは言えないレベル・・・

css

#easy_zoom{/*表示させるボックスのスタイル*/
    width:400px;
    height:600px;    
    border:5px solid #eee;
    background:#fff;
    color:#333;
    position:absolute;
    top:10px;
    left:200px;
    overflow:hidden;
    -moz-box-shadow:0 0 10px #777;
    -webkit-box-shadow:0 0 10px #777;
    box-shadow:0 0 10px #777;
    line-height:400px;
    text-align:center;
    }

html

<p><a href="big.jpg" class="zoom"><img src="small.jpg"></a></p>

via

Easy Image Zoom