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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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