この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 」