Thickbox.jsで学ぶ、jQuery Ajax,アニメーション

javascriptを使って、写真を効果的に見せる lightbox.js や thickbox.js。Lightbox.js については、以前にちょっと勉強したので、最近よく使っているjQueryではどんな風にやるのか、Thickboxも見てみた。

ThickBox 3.1

Thickbox全体の動きは、ソースのほうにコメントとして記述しつつ、こちらの記事では、「なるほど〜 jQueryではこう書くのか」というポイントを絞って抜き出してみます。ひとまず、コメントを書き込んだソースファイルはこちら。

thickbox-explain.js

まずは、HTMLタグを指定して、クリックされたときの動作を記述する。セレクタと組み合わせて、簡単にイベントをセットできるのが、jQuery ならでは。カンマ区切りのCSSセレクタの対象に、まとめて clickファンクションを指定。HTML要素は、this.href などで取得することができる。

$('a.thickbox, area.thickbox, input.thickbox').click(function(){
    var t = this.title || this.name || null;		
    var a = this.href || this.alt;
	var g = this.rel || false;

	// Thickbox 対象のオブジェクトがクリックされた時に実行されるファンクション
	// t, a, g = caption, url, imageGroup
	tb_show(t,a,g);

	// this オブジェクトからフォーカスが外れた際のonblur アクションをキャンセルする？
	// http://docs.jquery.com/Events#blur.28.29
	this.blur();
	return false;
	});

次は、モーダルダイアログの特徴でもある、ウェブページの上を半透明のスクリーンで覆うための処理を見てみる。ブラウザごとに、CSSハックなどを利用して、デザインを設定しています。

// 画面一杯に広がるモーダル用の背景のDomオブジェクトを作成。
// 背景がクリックされたら、tb_remove()を呼ぶ
if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
	$("body","html").css({height: "100%", width: "100%"});
	$("html").css("overflow","hidden");
	if (document.getElementById("TB_HideSelect") === null) {
		//iframe to hide select elements in ie6
		$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
		$("#TB_overlay").click(tb_remove);
		}
	} else { //all others
		if(document.getElementById("TB_overlay") === null){
			$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
			$("#TB_overlay").click(tb_remove);
	}
}

// tb_detectMacXFF() は Mac FireFox の場合に、PNG overlay を利用したハックCSSを適用する
// それ以外のブラウザには、先ほど作成したオーバーレイ用のHTMLに、 TB_overlayBG というクラスを適用
if(tb_detectMacXFF()){
	$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
}else{
	$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
}

// 読み込み中の画像を表示するHTMLタグを作成して、 show()で表示
$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
$('#TB_load').show();//show loader

そして、上記で作成したdivに対しては、以下のようなCSSが指定されている。

#TB_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
	position: fixed;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	border: 4px solid #525252;
	text-align:left;
	top:50%;
	left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

表示したモーダル・ダイアログを非表示にするのは、以下のファンクション。fadeOut() のアニメーションが終了した後に実行する複数のfunctionを、引数内にチェーンで記述するのがjQueryっぽい感じ。

function tb_remove() {

	// unbind("イベント名") でHTML要素に設定したイベントを削除
 	$("#TB_imageOff").unbind("click");
	$("#TB_closeWindowButton").unbind("click");

	// fadeOut()で表示ウィンドウをフェードアウトさせ、
	// アニメーションが終わったら引数内に書かれている function(){}を実行
	// functionを直接書かずに、function名を書いてもよい
	// trigger("イベント名")は、HTML要素へのイベント発生時に続く処理を実行する。 unbinde().remove()
	// submit などの標準イベントの他にも、bind()でカスタムイベントを設定することができる
	// http://docs.jquery.com/Events/trigger
	$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
	
	$("#TB_load").remove();
	if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
		$("body","html").css({height: "auto", width: "auto"});
		$("html").css("overflow","");
	}
	document.onkeydown = "";
	document.onkeyup = "";
	return false;
}

次にjQueryで、ある条件にマッチするHTMLエレメントを配列で取得して、それをループでまわすような場合の記述。Thickboxでは、画像をグループ分けしてナビゲーションを表示する際に、自分が画像グループのどこにいるのかをチェックするために使われています。

// 同一のimageGroupが、relに指定されたaタグを、配列でTB_TempArrayに取得
TB_TempArray = $("a[@rel="+imageGroup+"]").get();

// 上記の配列をループでまわす
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++)
{
  // 各HTML要素は以下のような形で取得できる
  TB_NextCaption = TB_TempArray[TB_Counter].title;
}

次に、画像を読み込んで、ブラウザのサイズにフィットするように画像サイズを調整して表示する部分。Thickboxの便利なところなので、そちらのコードをちょっと長めですが抜粋。ナビゲーションの表示の部分は省いています。

imgPreloader = new Image();
// imgPreloader の onload ファンクションの内容を定義
imgPreloader.onload = function(){		
  imgPreloader.onload = null;

  // Resizing large images - orginal by Christian Montoya edited by me.
  // 大きな画像を、ページサイズ内に納めるために、画像のサイズを決定する
  var pagesize = tb_getPageSize();
  var x = pagesize[0] - 150;
  var y = pagesize[1] - 150;
  var imageWidth = imgPreloader.width;
  var imageHeight = imgPreloader.height;

  // 画像が縦横、それぞれページ画面サイズより大きかった場合に設定する値が４種類
  if (imageWidth > x) {
	imageHeight = imageHeight * (x / imageWidth); 
	imageWidth = x; 
	if (imageHeight > y) { 
		imageWidth = imageWidth * (y / imageHeight); 
	    imageHeight = y; 
	}
  } else if (imageHeight > y) { 
	imageWidth = imageWidth * (y / imageHeight); 
	imageHeight = y; 
	if (imageWidth > x) { 
	  imageHeight = imageHeight * (x / imageWidth); 
	  imageWidth = x;
	}
}
// End Resizing : リサイズ終了
			
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;

// 画像を表示するHTMLタグを、#TB_window に追加する
  $("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>"); 		
			
  tb_position();
  $("#TB_load").remove();
  $("#TB_ImageOff").click(tb_remove);
  $("#TB_window").css({display:"block"}); //for safari using css instead of show
				
}; // ここまでが、imagePreloader.onload() = fucntion() { の内容

// src を指定して、実際に画像を読み込み
imgPreloader.src = url;

この中で使われている、補助ファンクションは以下。

// モーダルウィンドウを表示する位置を指定
function tb_position() {
  $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
		$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}

// ブラウザのページサイズを取得するファンクション
function tb_getPageSize(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	arrayPageSize = [w,h];
	return arrayPageSize;
}

// Mac FireFox の場合を判断
function tb_detectMacXFF() {
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
    return true;
  }
}

最後に、ちょっと便利そうなユーティリティー。URLのなかから、?以降の引数パラメーターを取得する記述。

  var queryString = url.replace(/^[^¥?]+¥??/,'');
  var params = tb_parseQuery( queryString );

  // パラメーターはこんな感じで使える
  TB_WIDTH = (params['width']*1) + 30 || 630;

  // URL の中から引数を切り出すファンクション
  function tb_parseQuery ( query ) {
   var Params = {};
   if ( ! query ) {return Params;}// return empty object
   var Pairs = query.split(/[;&]/);
   for ( var i = 0; i < Pairs.length; i++ ) {
      var KeyVal = Pairs[i].split('=');
      if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
      var key = unescape( KeyVal[0] );
      var val = unescape( KeyVal[1] );
      val = val.replace(/¥+/g, ' ');
      Params[key] = val;
   }
   return Params;
  }