画像をズームするjavascript「loupe.js」

「大きい画像を載せて、細かい部分までみてもらいたい」
サイトの開設者はそう思っていても、閲覧する側にとってみれば面倒くさいし疲れてしまいます。
netzgestaのloupe.jsはズームできる画像を作成でき、閲覧者の好奇心をそそります。

使用方法
loupe.jsからファイル一式をダウンロードし、headに以下を書きます。
<script type="text/javascript">
var loupePath = "loupe.pngまでのパス";
</script>
<script type="text/javascript" src="http://yourdomain/loupe.js"></script>
<!--[if gte IE 6] --> //IE6用
<script type="text/javascript">
var loupePath = "http://yourdomain/vml/";
</script>
<script src="http://yourdomain/vml/loupe.js" type="text/javascript"></script>

<!--[endif]-->
＊注意：IE6ではpng形式をサポートしていませんので、vmlディレクトリにある画像をします
さらにHTMLで対象となる画像をdivで囲み、"initLoupe(this.id);"を加えます。
<div>
<img onLoad="initLoupe(this.id);" src="画像URI">
</div>
サンプルの例では
<div style="width:356px; height:205px; background:url(あらかじめ表示する画像) >
<img onLoad="initLoupe(this.id,true,773,364);" src="ズーム表示する画像" width="356" height="205">
</div>
と指定し、背景画像に小さい画像を、その上に同じ大きさに指定したズーム用画像を置いています。
なお、同じ大きさの画像で中身が違う場合は以下の通りです。
<div style="position:relative;">
<img onLoad="initLoupe(this.id,true);" src="透過する画像" style="z-index: -1; width="400" height="480">
<div style="position:absolute; left:0; top:0; width:400px; height:480px; background:url(あらかじめ表示する画像) no-repeat">
</div>
</div>
透過する画像をz-indexで下にもってきて、その上にあらかじめ表示する画像をのせています。
画像をズームするjavascript「loupe.js」サンプル

2007年08月29日

前の記事：ニュースティッカーを作成するjavascript「Innerfade with jquery」
次の記事：画像を3D風に左右に傾かせるjavascript「reflex.js」

関連記事

• FancyZoom
• Live Thumbnail
• [jQuery]jQPanView
• クールなズームエフェクトjavascript「jQZoom」
• 簡単に画像を拡大できるjavascript「Thumbnoo」

• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」
• レイヤー表示（？）JavaScript「jParallax」