画像のサムネイル化を 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="拡大画像"> </div>
dialog を使う際には title 要素を指定するように気をつけてください。
以上で表題の件を解決できました。