Lightbox風の物を作ってみる

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

Code

$(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();
      });
    });
  });
});

JavaScript1000本ノック トップページへ