画像のズームアップ「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>
関連記事
- シンプルな画像のスライドJavaScript「jquery easySlider」
- 画像のスライドショー「jquery showcase」
- スライドでフラッシュ風にみせる「s3Slider jQuery plugin」
- 「jQuery」でテーブルの行毎に色を替える
- コンテンツや画像を縦にスライドさせるJavaScript（MooTools）
タグ: JavaScript
