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>