この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>
参考になりました。ありがとうございます。ところでこのプラグインを使って、拡大の画面を常時表示させる方法はないのでしょうか??その場合、上記のソースのどこにどのコードを置けばいいでしょうか?教えて下さい。
常時表示させるにはソースコード内にコチラを追加してみて下さい。「 var options = alwaysOn: true 」