Copyright © 2012 econosys system All rights reserved.

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

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

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

機能（できること）

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

特徴

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

ダウンロード

2011.12.12 Version1.25リリース（Win IE9に対応）
2010.12.21 Version1.24リリース（テーブル,画像のデフォルトcss値の修正。Safariイメージマップ不具合への対応）
2010.12.07 Version1.23リリース（WindowXP IE8 で透過png使用時にフェードインエフェクトが正常に動作しないのを修正）

使用方法

ダウンロードした【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> 
```
を設置するとそこが基準点となり、そこからの相対座標位置に拡大画像を表示します。（基準点の一括指定）
テンプレートファイルを変更することによって好きなレイアウトで表示させることが出来ます。（詳しくをドキュメントをお読みください）

よくあるエラー（IEのみでエラーが発生する場合）
下記のように最後にカンマがある場合、IEのみエラーとなりますので必ず取り除いてください。

var z = new iz_zoom('image1',{
	'templatefile' : 'js/iz_zoom/template02.html' ,
	'cssfile'      : 'js/iz_zoom/template02.css' ,
	'imagefile'    : 'large_images/image02.jpg' ,
);
　　　↓
var z = new iz_zoom('image1',{
	'templatefile' : 'js/iz_zoom/template02.html' ,
	'cssfile'      : 'js/iz_zoom/template02.css' ,
	'imagefile'    : 'large_images/image02.jpg'
);

イメージマップと同時に使用する場合
イメージマップと同時に使用する場合、iz_zoomを設置するhtmlページ内に下記のコードを加えてください。
```
<div id="iz_zoom_box" style="cursor: pointer; position:absolute;top:0px; left:0px; width:0; height:0; border:none;"></div>
```

感想をお寄せ下さい

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

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

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

IZ_ZOOM使用サイト

・きらきら工房