強火で進め このページをアンテナに追加 RSSフィード

整理された情報は こちら へどうぞ。

2008年03月27日

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

f:id:nakamura001:20080329203725j:image

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)

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

東京発フリー写真素材集(観光名所編〜その1)

http://www.shihei.com/free01/kankou01.html

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。

トラックバック - http://d.hatena.ne.jp/nakamura001/20080327/1206638936
リンク元