FREE SOFT フリーソフト

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

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

iz_zoom iz_zoom

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ステップの簡単設置です。

ダウンロード

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

  1. ダウンロードした【iz_zoom_versionx.xx.zip(xはそのときのバージョンの数字)】を解凍すると【iz_zoom】というディレクトリが作成されますので、 「iz_zoom」以下の 「jsフォルダ」をサーバにアップロードします
  2. 使用したい htmlファイルの<head>〜</head>内に次の4行を追加します。
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    <script type="text/javascript" src="js/jquery.iz_zoom.js"></script>
    <link type="text/css" rel="stylesheet" href="js/iz_zoom_keyframe.css">
    
  3. iz_zoomを起動する画像にIDを追加します(例:image1 というIDを追加)
    <img src="thumb.gif"> → <img id="image1" src="thumb.gif">
    
  4. IDに対してiz_zoomの設定を行います。</body>(bodyの閉じタグ)の直前に下記の行を追加。(外部 .js ファイルにしてもOK)
    記述方式は new iz_zoom('ID名',変数のハッシュ);
    <script type="text/javascript">
    $(document).ready(function(){
      $('#image1').iz_zoom({
        'templatefile' : 'js/iz_zoom/template01.html' ,
        'cssfile'      : 'js/iz_zoom/template01.css' ,
        'imagefile'    : 'gallery_images/image01_large.jpg' ,
        'imagefile@2x' : 'gallery_images/image01_large@2x.jpg' ,
        'x'            : 95 ,
        'y'            : 40 ,
        'relative_id'  : 'image1' ,
        'title'        : 'image title '
      });
    });
    </script>
    
    (変数のハッシュの説明)
    templatefile : テンプレートファイル名 ,
    cssfile      : テンプレートcssファイル名 ,
    imagefile    : 画像ファイル名 ,
    imagefile@2x : Retinaディスプレイ用高解像度画像ファイル名 ,
    x            : x座標(画面左上からの絶対値),
    y            : y座標(画面左上からの絶対値 ,
    relative_id  : ID名(相対座標の基準となるID名) ,
    任意の変数名 : 任意の値
    
  5. relative_id : ID名(相対座標の基準となるID名) をセットするとそのIDがつけられたHTMLタグ要素の左上を基準とした 相対座標位置に画像を表示します。(画像ごとの基準点の指定)
    下記<DIV>タグと同時に指定があってもこちらが優先されます。
  6. テンプレートファイルを変更することによって好きなレイアウトで表示させることが出来ます。
  7. アニメーションを変更するには「js/iz_zoom_keyframe.css」を変更してください。(CSS3アニメーション、キーフレームファイルです。)
  8. よくあるエラー(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'
    );
    
  9. イメージマップと同時に使用する場合
    イメージマップと同時に使用する場合、iz_zoomを設置するhtmlページ内に下記のコードを加えてください。
    <div id="iz_zoom_box" style="cursor: pointer; position:absolute;top:0px; left:0px; width:0; height:0; border:none;"></div>
    

感想をお寄せ下さい

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