フリーソフト

iz_zoom Version 3.01画像拡大表示ライブラリ

テンプレート,CSS3アニメーションを使用した画像拡大表示ライブラリ

https://econosys-system.com/img/iz_zoom01.png https://econosys-system.com/img/iz_zoom02.png

iz_zoom とは？

iz_zoomはJavaScript（jQuery）+CSS3 による画像拡大表示ライブラリです。
テンプレートを使用しているので、テンプレートhtmlを変更するだけでレイアウトを自由にカスタマイズできます。
アニメーションもCSSを変更するだけでレイアウトを自由にカスタマイズできます。
動作確認ブラウザ

Windows: IE11 , edge, firefox, Chrome

Mac: Safari, firefox, Chrome

iPad: Safari

iPhone: Safari

本ソフトウェアは「フリーソフト」です。無償で使用、改変（別システムへの組み込み）、再配布する事が出来ます。ライセンスはMITです。商用利用もちろんOK。

機能（できること）

・新規ウィンドウを開かずに画像の拡大表示を行うJavaScriptです。
・ウィンドウをフェードインして表示します。

特徴

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

ダウンロード

iz_zom最新バージョンのダウンロードはこちら(Github)からどうぞ。

2016.02.10 Version3.00リリース（スマートフォン、タブレットに対応）
2016.11.22 Version3.01リリース（細かいbug-fix）

使用方法（必ずどこかのサーバにアップロードして使用してください。）

ダウンロードした【iz_zoom_versionx.xx.zip（xはそのときのバージョンの数字）】を解凍すると【iz_zoom】というディレクトリが作成されますので、「iz_zoom」以下の「jsフォルダ」をサーバにアップロードします
使用したい htmlファイルの<head>〜</head>内に次の4行を追加します。
iz_zoomを起動する画像にIDを追加します（例：image1 というIDを追加）
IDに対してiz_zoomの設定を行います。</body>（bodyの閉じタグ）の直前に下記の行を追加。（外部 .js ファイルにしてもOK）
記述方式は new iz_zoom('ID名',変数のハッシュ);
relative_id : ID名（相対座標の基準となるID名）をセットするとそのIDがつけられたHTMLタグ要素の左上を基準とした相対座標位置に画像を表示します。（画像ごとの基準点の指定）
下記<DIV>タグと同時に指定があってもこちらが優先されます。
テンプレートファイルを変更することによって好きなレイアウトで表示させることが出来ます。
アニメーションを変更するには「js/iz_zoom_keyframe.css」を変更してください。（CSS3アニメーション、キーフレームファイルです。）
よくあるエラー（IEのみでエラーが発生する場合）
下記のように最後にカンマがある場合、IEのみエラーとなりますので必ず取り除いてください。
イメージマップと同時に使用する場合
イメージマップと同時に使用する場合、iz_zoomを設置するhtmlページ内に下記のコードを加えてください。

感想をお寄せ下さい

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