画像ビューワーのように画像を拡大して表示するという機能をjavascriptで実現しているのが今回紹介する「shiftzoom.js」です。下記のよう現在拡大されているのが全体の何処の部分なのか、表示することも可能です。

上記の拡大して見せると言う基本動作の他に様々なオプションが用意されていて、画像をフェードさせたり、ズームのタイミングを指定できたりと細かいところまで配慮されていますので、画像をメインに扱うサイトでは重宝しそうなスクリプトです。

詳しくは以下

実装はそれほど複雑ではなくまずHEADの部分でjavascriptを読み込ませます。

<script type="text/javascript" src="shiftzoom.js"></script>

// only if the cursor images for IE are not in the current path
<scriptscript type="text/javascript">
shiftzoom.defaultCurpath=’images/cursors/’;
</script>

次にshiftzoom.jsを使用したい画像に以下のようにonloadで指定すれば実装できます。

<div><img onLoad="shiftzoom.add(this);" width="400" height="200" …></div>

javascriptは「shiftzoom.js (zoom and pan functionality)」からダウンロードできます。動作環境はIE6〜、Firefox1.5〜、Opera9〜、safariとなっていて、幅広いブラウザで利用可能です。簡単に使用できるのも良いですね。

shiftzoom.js (zoom and pan functionality)