画像のサムネイル化を jQuery UI で行う

一定以上のサイズの画像が自動的に最大幅以内に収まるように jQuery UI で制御します。

CSS の準備

まずはスタイルシートにサムネイル用のクラスを記述します。ここでは最大幅は 640 px とし、分かりやすいよう枠の表示とマウスカーソルの変更も行いました。

img.thumb {
  cursor: pointer;
  border: #888888 4px solid;
  width: 640px;
  height: auto;
}

JavaScript の記述

今回は jQuery UI の dialog を用いるので、最低限それは読み込んでおいてください。

$(function() {
  $('#dialog').dialog({
    model: true,
    height: 'auto',
    width: 'auto',
    autoOpen: false,
    position: {
      of : 'body',
      at : 'left top',
      my : 'center top'
    }
  });

  $("img").bind("load", function() {
    if($(this).width() >= 640) {
      $(this).addClass("thumb");
      $(this).click(function() {
        $('#dialog').html('<img src="' + $(this).attr("src") + '" alt="image" />');
        $('#dialog').dialog('open');
      });
    }
  });
});

ポイントとして、画像はロードされる前に width を取得すると 0 が返されるため、ロード後に判定が行われるようにイベントを指定します。

html の書き換え

最後に必要な html ファイルにダイアログになる要素を設定します。

<div id="dialog" title="拡大画像">&nbsp;</div>

dialog を使う際には title 要素を指定するように気をつけてください。

以上で表題の件を解決できました。