lightboxで表示する画像をサイズ指定する

意外だったんですけど、lightboxって表示する画像をサイズ指定することってできないんですね。だからLightbox Plusとかあるんだなぁ、と。iboxなら可能なのですが、今さら乗り換えるのも工数がかかるので適当に修正してみました。
まずHTML。

<a href="./images/xxx.jpg" rel="lightbox?height=400&width=600">
	<img src="./images/zzz.jpg" alt="sample" width="150" height="75">
</a>

ibox風にクエリーストリング形式でrel属性にwidthとheightを指定します。
で、lightbox.js。クエリーストリングを解析するためのfunctionを用意します。というかiboxから持ってきただけなんですが。

function parseQuery(query) {
   var Params = new Object ();
   if (!query) return Params; 
   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;
}

このparseQueryというfunctionは便利なものでクエリーストリングを解析して連想配列を作ってくれます。
で

function showLightbox(objLink){
  中略
  imgPreload.onload=function(){
    var rel = objLink.rel;
    var params = parseQuery(rel.substr(9,999));
    if(params['height']) {
      imgPreload.height = params['height'];
      objImage.height = params['height'];
    }
    if (params['width']) {
      imgPreload.width = params['width'];
      objImage.width = params['width'];
    }
  中略
  }
  中略
}

という感じです。これでいいのか? という感は拭えないのですが、まぁ動いてるのでよしとしましょう。