画像の拡大表示も良いけれど、マウスオーバーによる虫眼鏡表示も色々なところで見かけます。そんな効果を自分サイトでもつけられるのがMagnifier.jsです。

サンプル。マウスオーバーしたところが右側に拡大表示されます。 さらにMagnifier.jsのユニークなところは枠の大きさをマウススクロールで変えられることです。 枠を小さくすると右側の拡大表示は大きくなります。 逆に枠を大きくすると右側は等倍に近づいていきます。 つまりこんな大きく表示も可能です。 別なデモです。 右側に分けるのではなく画像の上に重ねた表示もできます。 Magnifier.jsの対応ブラウザはIE 7以上となっており幅広いブラウザで動作が可能です。 使い方は以下のようなコードになります。

var evt = new Event(),
m = new Magnifier(evt);
m.attach({
    thumb: '#thumb',
    large: 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/400px-Starry_Night_Over_the_Rhone.jpg',
    largeWrapper: 'preview',
	zoomable: true
});

大きな画像のURLだけで使えるのは手軽ですね。zoomableをfalseに指定すればズームを使わないようにもできます。他にも様々なオプションがありますので自分のサイトに合わせて変更してみましょう。 Magnifier.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Magnifier.js demo mark-rolich/Magnifier.js