このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。
$(function () {
var thumbnail = $('#thumbnail li a'); // このセレクタを変えれば使いまわし可能
thumbnail.click(function(event){
event.preventDefault(); // リンクの遷移を止める
var clickHref = $(this).attr('href'); // 以下、クリックしたサムネのリンク先を取得して表示
$('<img>').attr('src', clickHref).bind('load', function(){ // 内部でDOM生成。続きは画像のロードが終わってから進む
var htmlElement = $('html'); // ブラウザの表示領域(高さ)を取得
var htmlHeight = htmlElement.height(); // ブラウザの表示領域(高さ)を取得
htmlElement.css('height', htmlHeight + 'px'); // 見切れないようにheightを指定
var originalImageSize = this.naturalWidth; // リンク先の画像サイズ取得
$('body').append('<div id="hmsnBox"><div id="hmsnBoxOuter" style="height: ' + htmlHeight + 'px;"></div><p id="hmsnBoxInner" style="width: ' + originalImageSize + 'px"><img src="' + clickHref + '" alt="" /><span id="hmsnBoxClose">Close</span></p></div>');
$('#hmsnBoxClose').click(function(){
$('#hmsnBox').remove();
});
});
});
});