// iz_zoom.js (c)2002-2007 econosys system http://www.econosys.jp/system/ // Version // 1.0 とりあえず作成 // 1.01 エラー表示方法を修正 // 1.02 実行ステップを減らすよう変更,テンプレート修正 // 1.10 変数をハッシュで渡すように変更,Javascriptクラス化 // 1.11 cssファイルを分離するように // 1.12 Ajax.Requestをpostからgetに変更 // 1.13 template03追加 // Licence // 本スクリプトは「フリーソフトです」 // ライセンスは修正BSDライセンスとします // つまり「著作権表示」（.jsファイル,テンプレートファイルのそれぞれ1行目）さえ変更しなければ自由に使用,再配布など行えます // // Usage // 1. 下記の1フォルダ をサーバにアップロードします // 「jsフォルダ」 // // 2. 使用したい htmlファイルの〜内に次の3行を追加します。 // // // // // 3. iz_zoomを起動する画像にIDを追加します（例：image1 というIDを追加） // → // // 4. IDに対してiz_zoomの設定を行います。の直前に下記の行を追加。（外部 .js ファイルにしてもOK） // 記述方式は new iz_zoom('ID名',変数のハッシュ); // var z = new iz_zoom('image1',{ // 'templatefile' : 'js/iz_zoom/template02.html' , // 'imagefile' : 'large_images/image02.jpg' , // 'x' : 95 , // 'y' : 90 , // 'title' : 'タイトルのテストです' // } // ); // （変数のハッシュの説明） // templatefile : テンプレートファイル名, // imagefile : 画像ファイル名, // x : x座標（画面左上からの絶対値）, // y : y座標（画面左上からの絶対値 // 任意の変数名 : 任意の値 // Customize Template // テンプレート「js/iz_zoom/template01.html」等を変更することによって好きなレイアウトで表示させることが出来ます。 // その際下記のルールを守って下さい // // A.テンプレートの一番上のタグに【#{style} 】を挿入する。 // 例：
// // B.画像ファイル名は【#{imagefile}】とする。 // 例： // // C.次の名称の変数はプログラムが使用する予約変数ですので使用しないで下さい // x, y, style, templatefile, cssfile var iz_zoom = function(id_name, options){ // cursor if (! $(id_name)){ alert('iz_zoom_error : can not find element id="'+id_name+'" .'); return false;} Element.setStyle(id_name, { 'cursor' : 'pointer' }); // create div id = 'iz_zoom_box'; if (! $(id) ){ document.body.innerHTML += '
'; } this.element = $(id_name); this.options = options; this._iz_register_events(); }; iz_zoom.prototype = { //----------------------------------------------- _debug_method _debugmethod : function(event) { alert(this.element.id); }, //----------------------------------------------- _iz_register_events _iz_register_events: function(){ Event.observe(this.element, "click", this._iz_start.bindAsEventListener(this)); }, //----------------------------------------------- _iz_start _iz_start: function() { id = 'iz_zoom_box'; templatefile = this.options.templatefile; imagefile = this.options.imagefile; cssfile = this.options.cssfile; x = this.options.x; y = this.options.y; hash = this.options // default if (! x){ x=0; } if (! y){ y=0; } // check arguments if (! templatefile ){ alert('iz_zoom_error : please set templatefile'); return false; } if (! imagefile ){ alert('iz_zoom_error : please set imagefile'); return false; } $(id).innerHTML = ''; // load image file img = new Image(); img.src = imagefile; img.onload = function() { } // load css file if (cssfile){ var css = document.createElement('link'); css.rel = 'stylesheet'; css.href = cssfile; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); } // load template file new Ajax.Request(templatefile, { method : 'get', onFailure : function(httpObj){ alert('iz_zoom_error : can not read templatefile ['+templatefile+'].'); return false; } , onSuccess : this._view_template.bindAsEventListener(this) , onComplete : function(httpObj){ //alert('ajax complete'); } }); } , //----------------------------------------------- _view_template _view_template: function(httpObj) { var text = httpObj.responseText; text = this._ajax_filter(text); var template = new Template(text); // hash.style hash.style='style="position:relative; top:'+y+'px; left:'+x+'px; z-index:1001; display:none;"'; $(id).innerHTML = template.evaluate(hash); // effect this._iz_effect(); // onclick event this._iz_event_observe(); } , //----------------------------------------------- _ajax_filter _ajax_filter: function(t){ if(navigator.appVersion.indexOf( "KHTML" ) > -1){ _ajax_filter = function(t){ var esc = escape(t); return(esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t } } return t; }, //----------------------------------------------- _iz_effect _iz_effect: function(){ new Effect.Appear( $('iz_element'), { from:0.0, to:1.0, duration:1.0 }); }, //----------------------------------------------- _iz_event_observe _iz_event_observe: function(){ Event.observe( $('iz_element'), 'click', this._iz_click.bindAsEventListener(this), false); }, //----------------------------------------------- _iz_click _iz_click: function(event){ Event.stopObserving( $('iz_element'), 'click', this._iz_click, false); new Effect.Appear( $('iz_element'), { from:1.0, to:0.0, duration:1.0 }) setTimeout(function(){ $('iz_zoom_box').innerHTML = ''; }, 1002); } }