hamashun.com

サンプルページ

概要

ちょっと遅れましたが、11月4週目のJavaScriptです。やりたかった事は以下。

• いわゆるLightbox的なアレを作ってみたい
• サムネイルをクリックするとリンク先の画像を読み込んでサイズを取得、それに合わせてポラロイド風の枠線を付ける
• できるだけ使いまわしやすく・かつカオスにならないようにする

ソースコード

jQueryを使用しています。 IEは naturalWidth が効かないので、まだ対応できてません。

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

学んだ事や雑感

ブラウザの表示領域

$("body")で高さを取得したら、縦marginの影響でズレてしまったので、$("html")で取得したら思い通りになった。

$(this)と$("this")の違い

なんか違うらしい。

生成したDOMの中で変数を展開する

• src="' + clickHref + '"
• style="height: ' + htmlHeight + 'px;"

こんな感じ。

処理を入れ子にしていく

これまで他の人が書いたコードを見て「なんでこんなにたくさん入れ子になりまくるんだろう」と思っていたのだけど、なんとなくわかったような気がしないでもない。

画像のロードを待つ

jQueryは、単に $('<img>').attr('src', 'hoge.jpg') などとすると、表示はせずに内部で生成してくれる。 で、その画像のサイズを取得する処理が画像自体のロード完了より先に動いてしまうので、上手くいかなかった。

会社の人に聞いて、ロード完了後に取得するようにして解決。 ありがとうございます＞＜

改良したい点

• IEに対応したい。 JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log で対応できそうなのだけど、理解するのにもう少しかかりそう。
• 画像のロード中に、ユーザーに何らかのアクションを返したい。 いわゆるロード中のくるくるとか。