Copyright © 2009 econosys system All rights reserved.

iz_zoom(ajaxテンプレートを使用した画像拡大表示ライブラリ)

ajaxテンプレートを使用した画像拡大表示ライブラリ【iz_zoom】

【iz_zoom】JavaScriptによる画像拡大表示ライブラリです。
ajaxテンプレートを使用しているので、テンプレートhtmlを変更するだけでレイアウトを自由にカスタマイズできます。
Lightbox.jsの代わりにどうぞ。 [ 確認ブラウザ ] Mac Safari2, Mac Firefox2, Mac Opera 9.10
Win IE6, IE7, Win Firefox2, Win Opera 9.00 にて動作確認しています。
prototype.js , script.aculo.us を使用しています。
本ソフトウェアは「フリーソフト」です。
無償で使用、改変（別システムへの組み込み）、再配布する事が出来ます。
ライセンスは修正BSDです。商用利用もちろんOK。

機能（できること）

・新規ウィンドウを開かずに画像の拡大表示を行うJavaScriptです。
・ウィンドウをフェードインして表示します。
・簡単なデモページはこちら
・ダウンロードはこちら

特徴

・ajaxによりhtmlテンプレートファイルを読み込む方法を採用しています。
・htmlテンプレートファイルを変更することにより好きなレイアウトの画像表示が行えます。
・わずか4ステップの簡単設置です。

ダウンロード

2010.04.27 Version1.22リリース（onclickイベントが削除出来ていないバグを修正）
2008.07.14 Version1.20リリース（mouseover時に先読みをする機能を追加 , テキストだけでもiz_zoomを表示出来るように修正）
2008.06.10 Version1.19リリース(画像ごとに相対座標を指定できる relative_id プロパティを追加)

使用方法

ダウンロードした【iz_zoom_versionx.xx.zip（xはそのときのバージョンの数字）】を解凍すると【iz_zoom】というディレクトリが作成されますので、「iz_zoom」以下の「jsフォルダ」をサーバにアップロードします

使用したい htmlファイルの<head>〜</head>内に次の3行を追加します。

<script type="text/javascript" src="js/lib/prototype.js"></script>
<script type="text/javascript" src="js/lib/scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/iz_zoom.js"></script>

iz_zoomを起動する画像にIDを追加します（例：image1 というIDを追加）
```
<img src="thumb.gif" /> → <img id="image1" src="thumb.gif" />
```

IDに対してiz_zoomの設定を行います。</body>（bodyの閉じタグ）の直前に下記の行を追加。（外部 .js ファイルにしてもOK）
記述方式は new iz_zoom('ID名',変数のハッシュ);

<script type="text/javascript">
var z = new iz_zoom('image1',{
	'templatefile' : 'js/iz_zoom/template02.html' ,
	'cssfile'      : 'js/iz_zoom/template02.css' ,
	'imagefile'    : 'large_images/image02.jpg' ,
	'x'            : 95 ,
	'y'            : 90 ,
	'relative_id'  : 'image1' ,
	'title'        : 'タイトルのテストです'
	}
);
</script>

（変数のハッシュの説明）
templatefile : テンプレートファイル名 ,
cssfile      : テンプレートcssファイル名 ,
imagefile    : 画像ファイル名 ,
x            : x座標（画面左上からの絶対値）,
y            : y座標（画面左上からの絶対値 ,
relative_id  : ID名（相対座標の基準となるID名） ,
任意の変数名 : 任意の値

relative_id : ID名（相対座標の基準となるID名）をセットするとそのIDがつけられたHTMLタグ要素の左上を基準とした相対座標位置に画像を表示します。（画像ごとの基準点の指定）
下記<DIV>タグと同時に指定があってもこちらが優先されます。
設置するhtmlページに
```
<div id="iz_zoom_relative_box"></div> 
```
を設置するとそこが基準点となり、そこからの相対座標位置に拡大画像を表示します。（基準点の一括指定）
テンプレートファイルを変更することによって好きなレイアウトで表示させることが出来ます。（詳しくをドキュメントをお読みください）

感想をお寄せ下さい

本ソフトを使用した感想、バグ報告、機能追加の要望（こんな機能が欲しい）等お問い合わせフォームからお気軽にどうぞ。

IZ_ZOOMを使用したサイトをお教え下さい

IZ_ZOOMを使用したサイトをお問い合わせフォームからお送り下さい。こちらで審査の後、当ページからリンクさせていただきます。
（必ず制作者本人がお送り下さい。またサイトの内容によってはリンク出来ない可能性があります。あらかじめご了承くださいませ。）