画像がロードされるのを待って、高さを更新しないとだめです。ってどうしても毎回忘れててうっかり計算あわへんとかで時間潰してしまう・・・

下のようなHTMLがあって、

    

        
            
        
        
            Photo by Martin Gommel
        
    
    


"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

コンテンツの高さを取得するには例えば

jQuery(function($) {
    var contentsHeight = $("div.txt").get(0).offsetHeight;
});

とかで取れるんですけど、画像にheight属性がないので、画像がロードされるとコンテンツの高さが変わってしまうんですね。なので、画像がある場合には、画像がロードされるのを待ってからもう一度取得しないとだめです。

画像のロード完了はnew Image().completeを使うんですけど、そこの説明ははしょってm5ImgLoadっていうの使ってます。ちょっと前に$(“img”).load()（img.onloadも同じ）だと画像の読み込み完了が取れないみたいなエントリを書いてやっぱり必要なかったとか書いてたのですけど、やはりIEだと取れないので、これ使ってます。

jQuery(function($) {
    var $txt = $("div.txt"),
        contentsHeight = $txt.get(0).offsetHeight,
        $images = $("img", $txt),
        imgLength = 0,
        imgLoaded = 0;

    if ( $images.length ) {
        imgLength = $images.length;
        $images.each(function() {
            $(this).m5ImgLoad(function() {
                imgLoaded += 1;
            })
        });

        (function() {
            if ( imgLoaded === imgLength ) {
                contentsHeight = $txt.get(0).offsetHeight;
                return;
            }
            setTimeout(arguments.callee, 30);
        }());
    }
});

なんか長くなりましたけど、height属性がない場合も多いので面倒ですけど気にしておかないとはまります・・・

先月までばたばたしていて、アーカイブの穴がまた空いてしまったのですが、、それはおいておいて、5月いっぱいでマインドフリーを退職し、6月からは居住地を東京に移し、ピクセルグリッドで働いています。

（pixelgrid.push(“5509″) とかしようと思ったけど意味違ってくるかと思ってやめました）

色んな意味で刺激的すぎて毎日鼻血出っぱなしです。血が足りない。

ディレクターからフロントエンジニアになり、いや以前もディレクターと言いつつ開発ばっかりしてましたけどｗ、UIをもっともっとアレしたいなぁと思ってるアレです。アレはソレとかコレで補完してください。

関東はこれで三度目なので特にこれといって不便とかないですが、まぁ・・・車が多いし道混みすぎてますね。大体バイク移動なのですいすいです。

そんなわけでせっかく東京に来たので、色々参加していこうと思ってるので、おもろいこと全然言われへん大阪人ですけど、こちらの方はよろしくです。今日Sugamo.cssに初参加してえどさんのおかげで逆にやる気なくなったり、とかしてないです、恐ろしい集まりやで・・・

とりあえず、雑貨屋たくさん探そー。いいとこ知ってる方教えてください:)

あれ、なんか色々書こうと思ったのにいざ書いたら書いたでめっちゃ短い・・・

どうでもいいこと

直接関係ないですけどFacebookのEmployerのところ変更したら

こういう表記になって、気がきいてるなぁとか思ったのでした。

そろそろHTML5でコーディングする機会も増えてきたりするかもしれませんが、どうしてもブラウザ対応はしておきたいもの。jQueryで（※）要素をごにょごにょする際にちょっとはまったので一応書いておきます。

Read more

最近あまり見なくなってきたし、個人的にも使う機会も減ったLightbox系のプラグインを久しぶりに探したついでにメモ。またいつか使うときのために・・・ライセンス形態と対応メディアも付けたのでそれなりに見やすいかもかもかも。

（デモもつけようと思ったけどめんどくさいからやめた・・・

jQuery LightBox plugin

いつものLightbox。お世話になった人も多そう。

ページ	アーカイブ・デモ
対応メディア	画像
ライセンス	MITライセンス
その他	ふつーのLightbox

ThickBox 3.1

jQueryと言えばのThickbox。当初iframeが使えたのはこれだけだったもんで色々表示してた記憶があります。

ページ	アーカイブ デモ
対応メディア	画像・iframe・Inline・Ajax・Youtubeとかも可
ライセンス	MITライセンス
その他	よく使われていたプラグインな印象

PrettyPhoto

角丸スタイルと拡大ボタンなどちょっとリッチなLightboxみたいなの。

ページ	アーカイブ・デモ
対応メディア	画像・SWF・Youtube・Vimeo・MOV・iframe・Inline
ライセンス	Creative Commons Attribution 2.5
その他	ギャラリー・スライドショー

jQuery.popeye 2.0

Lightboxみたいな効果を画像にインラインで埋め込めるかなり素敵プラグインやけどまだ使ったことないなー。。あ、WordPressプラグインで使ってみればいいのかも。

ページ	アーカイブデモ デモ
対応メディア	画像
ライセンス	GPL 2.0
その他	WordPressプラグインもあるよ

Shadowbox.js

商用は有償なだけあって多機能なやつ。

ページ	アーカイブ・デモ
対応メディア	画像・SWF・Youtube・MOV・Vimeo・FLV
ライセンス	Shadowbox.js License（商用$20～）
その他	jQuery以外の多数のフレームワークで動く

YoxView

表示が割ときれい。テーマをきれいにすればちょうどよくなりそうな気もする。。

ページ	アーカイブ・デモ
対応メディア	画像
ライセンス	MITライセンス
その他	多言語サポート

fancybox

スッキリしててみやすいさすがファンシー。

ページ	アーカイブ・デモ
対応メディア	画像
ライセンス	MITとGPLのデュアルライセンス
その他	個人的にこのみ

ColorBox

なにやら人気っぽいColorBox（Xmarks調べ）。テーマが5つ用意されていて簡単に見た目を変えられます。スライドショーとかギャラリーっぽい機能も。

ページ	アーカイブ デモ1・デモ2・デモ3・デモ4・デモ5 （デモによってスタイルが違う）
対応メディア	画像
ライセンス	MITライセンス
その他	オプションが豊富

使うならfancyboxかColorBoxかな。。。おれおれLightboxを汎用的にして公開する手もあるけど・・・おれおれと言えば「これからの新標準LightBox jDTLightBox.js」何の役にも立たへんLightboxもあるで・・・

サブドメインのトラッキングなんて基本の基本で、いまさらなんですけど、いつも忘れるもんで…記事にすれば忘れないんじゃないかとかそういう感じです。

埋め込みコードの修正

コードの発行のときに「複数のサブドメインがある １ つのドメイン」を選択するか下記のコメント部分を追加します。

フィルタの作成と適用

ふつうは新しくプロファイルを作ると思うので、新しいプロファイルを同じドメインで作成して下図のようなフィルタを作成して適用します。

これでもう忘れることはないでしょう。。きっと。