タイトルがえらく長いですね。要は、昨日紹介した［み］Facebookページのアルバムの写真をPHPで取得する方法で取得した写真たちを、jQuery Masonryを使って、キレイに並べたよ！っていう話です。ん、タイトルそのまんまですね…。
まぁ、気にせず紹介します。昨日紹介したコードでは、テキストも表示していましたが、今日のは端折って画像だけにします。というか、画像だけのほうがMasonryっぽいと勝手に思ったからです。
まずはjQuery Masonryを導入
まずは、jQuery Masonryを導入します。導入の仕方は、こちらを参考にしてください。
［み］jQuery Masonryの超基本的な使い方
まずは、コードです。
head内
[cc lang=”html”][/cc]
PHP部分
[cc lang=”php”] 0; $i–){if($thumb_size_count > $i){
$thumb_size = $thumb_size_count – $i;
break;
}
}
$name = $values[“name”];
$link = $values[“link”];
$source = $values[“images”][$thumb_size][“source”];
$width = $values[“images”][$thumb_size][“width”];
$height = $height[“images”][$thumb_size][“height”];
echo ‘
‘;
}
}
?>
[/cc]
あとは、↑これを、div class=”pics”で囲ってやるとOKです。
このコードだとこんなカンジになります。
FacebookのGraph APIを使って、アルバムの写真を取得してjQuery Masonryを使って表示するサンプル その1
とても残念な見た目ですね。おそらく、画像のheightを取得する前に、jQuery Masonry側でdivのheightを決めてしまうためにこうなっているんだと思います。そのため、ブラウザのウィンドウサイズを変更すると、キレイに表示されます。その時点では画像の読み込みが完了しているからですね。たぶんｗ
最初からキレイに表示する方法
画像読み込みが完了した後でjQuery Masonryを動作させたい場合は、imagesLoadedというメソッドを指定します。
[cc lang=”JavaScript”]
$(function(){
var $pics = $(‘.pics’);
$pics.imagesLoaded(function(){
$pics.masonry({
itemSelector: ‘.pic’,
isFitWidth: true,
isAnimated: true,
duration: 1000,
easing: ‘swing’
});
});
});
[/cc]
これで、最初から画像をきちんと読み込んでキレイに表示されます。
FacebookのGraph APIを使って、アルバムの写真を取得してjQuery Masonryを使って表示するサンプル その2
jQuery Masonryを使うときには、ほとんどの場合で画像が含まれてくると思うので、基本的にimagesLoadedを指定したほうが、あとから悩まなくて済むんじゃないでしょうか？特に、何でもかんでもコピペしてクリアしてきたみはらみたいな方であれば、なおさら、imagesLoadedを指定したやつを使いまわすといいと思いますよ：）
