画像のズームアップ「jqzoom」-jquery plugin


このjQueryのプラグイン「jqzoom」は通販サイトなどで商品をズームアップして表示する時に役立ちます。
まずは配布元からダウンロード後、元画像・拡大画像を用意して、拡大表示の設定をするだけ。表示位置は(上:top、下:bottom、左:left、右:right)。・・ソースをご覧ください
デモは左の写真にマウスをのせると右側に10倍ズームで表示されます。

配布元:jqzoom

DEMO:

ソース:

<html>
<head>
<title>JQzoom Demo</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqzoom.css" type="text/css">
<script type="text/javascript">
$(function() {
var options =
            {
  zoomWidth: 360,  // 拡大表示する横サイズ
  zoomHeight: 200,  // 拡大表示する縦サイズ
  position : 'right',  // 表示する位置
  yOffset :0,
  xOffset :10,
  title :false
 }
$(".jqzoom").jqzoom(options);
});
</script>
</head>
<body>
<div id="boxa" style="margin:10px;">
<a href="拡大画像" class="jqzoom" style="" title="">
<img src="元画像"  title="" style="border: 1px solid #666;"></a>
</div>
</body>
</html>

関連記事

2 コメント» 画像のズームアップ「jqzoom」-jquery plugin

  1. ykk より:

    参考になりました。ありがとうございます。ところでこのプラグインを使って、拡大の画面を常時表示させる方法はないのでしょうか??その場合、上記のソースのどこにどのコードを置けばいいでしょうか?教えて下さい。

  2. kamezo より:

    常時表示させるにはソースコード内にコチラを追加してみて下さい。「 var options = alwaysOn: true 」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*