強火で進め

このブログではプログラム関連の記事を中心に書いてます。

jQZoomによるJavaScriptでの画像ズーム

JavaScript jQuery jQZoom

jQZoomは画像をズーム表示するjQueryのプラグインです。
まあ、こちらのブログで紹介されているのを見て知ったのですがw

[JS]画像を拡大表示するスクリプト -jQZoom | コリス
http://coliss.com/articles/build-websites/operation/javascript/913.html

なかなか便利そうなのでさっそくダウンロードし、解凍後の index.html を参考に使ってみました。

基本情報

・サイト
jqzoom
http://www.mind-projects.it/blog/jqzoom_v10
・バージョン
2.1(2008年3月29日現在)
・ライセンス
不明

作成手順

1. 解答後作成されるimagesフォルダに「拡大前の画像ファイル(image_s.jpg)」「拡大後の画像用ファイル(image.jpg)」を保存する。
2. index.html と同じフォルダに index1.html ファイルを以下の内容で作成。

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
	<link href="style/jqzoom.css" rel="stylesheet" type="text/css" media="screen" />
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.jqzoom.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$(".jqzoom").jqueryzoom({
		xzoom: 300,		// 拡大表示の横幅(デフォルトは200ピクセル)
		yzoom: 300,		// 拡大表示の縦幅(デフォルトは200ピクセル)
		offset: 10,		// 元画像から拡大表示の距離(デフォルトは10ピクセル)
		position: "right",  	// 拡大表示の表示位置(デフォルトの値は"right"で右に表示、
					// それ以外の記述の場合は左に表示されます)
		preload: 1     		// 0以外のとき拡大後の画像用ファイルを先読みする
		});
	});
	</script>
</head>
<body>
	<div class="jqzoom"><img src="images/image_s.jpg" alt="東京タワー" jqimg="images/image.jpg" /></div>
</body>
</html>

サンプル(1)

解説

必要なファイルを読み込みます。

	<link href="style/jqzoom.css" rel="stylesheet" type="text/css" media="screen" />
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.jqzoom.js" type="text/javascript"></script>

以下の部分でいろいろな設定を変更できます。

		$(".jqzoom").jqueryzoom({
		xzoom: 300,		// 拡大表示の横幅(デフォルトは200ピクセル)
		yzoom: 300,		// 拡大表示の縦幅(デフォルトは200ピクセル)
		offset: 10,		// 元画像から拡大表示の距離(デフォルトは10ピクセル)
		position: "right",  	// 拡大表示の表示位置(デフォルトの値は"right"で右に表示、
					// それ以外の記述の場合は左に表示)
		preload: 1     		// 0以外のとき拡大後の画像用ファイルを先読みする
		});

サンプルのHTML記述の中に出てくるdivタグのクラス名"jqzoom"とjqimg="images/image.jpg"の jqimg は必ずこの名前で指定して下さい。

<div class="jqzoom"><img src="images/image_s.jpg" alt="東京タワー" jqimg="images/image.jpg" /></div>

拡大表示を左側に出したいときは以下の設定を行います。

	$(document).ready(function(){
		$(".jqzoom").jqueryzoom({
		xzoom: 300,		// 拡大表示の横幅(デフォルトは10ピクセル)
		yzoom: 300,		// 拡大表示の縦幅(デフォルトは10ピクセル)
		offset: 10,		// 元画像から拡大表示の距離(デフォルトは10ピクセル)
		position: "left",  	// 拡大表示の表示位置(デフォルトの値は"right"で右に表示、
					// それ以外の記述の場合は左に表示)
		preload: 1     		// 0以外のとき大きい画像ファイルを先読みする
		});
	});

サンプル(2)

なお画像はこちらのものを使わせて頂きました。ありがとうございます。

東京発フリー写真素材集（観光名所編〜その１）
http://www.shihei.com/free01/kankou01.html