仕事でJavaScriptライブラリ[shiftzoom]を
使う機会があり、今更ながら色々調べてみました。

そもそも[shiftzoom]は画像の一部を
拡大縮小するためのJSのライブラリで、
jQueryやPrototypeなどを利用していないので
競合の可能性が少ないです。
公式リンク => shiftzoom.js (javascript zoom and pan functionality for images)

①ヘッダ部分に下記のコードを追加します。

<!-- ライブラリの読み込み -->
<script src="js/shiftzoom.js"></script>
<script>
	if( document.images && document.createElement && document.getElementById ) {
		document.writeln( '<style type="text/css">' );
		document.writeln( 'img.shiftzoom { visibility: hidden; }' );
		document.writeln( '<\/style>' );
	}
	shiftzoom.defaultCurpath = 'images/cursors/';
</script>

②対象のタグ[img]をタグ[div]で囲い、
shiftzoomの関数[add]に対して自身を引数に渡します。

<div>
	<img src="./images/big.jpg" width="200" height="200" onLoad="shiftzoom.add(this);" />
</div>

③ブラウザでみて問題なければOK。

ここまでが基本的な流れです。
とても簡単に動いて、関数や指定できるパラメータも
多数あるのでとても便利なライブラリです。

パラメータの指定方法については
そのうち記載したいと思います。