[み]Facebookページのアルバムの写真をPHPで取得してjQuery Masonryでキレイに並べる方法

タイトルがえらく長いですね。要は、昨日紹介した[み]Facebookページのアルバムの写真をPHPで取得する方法で取得した写真たちを、jQuery Masonryを使って、キレイに並べたよ!っていう話です。ん、タイトルそのまんまですね…。

まぁ、気にせず紹介します。昨日紹介したコードでは、テキストも表示していましたが、今日のは端折って画像だけにします。というか、画像だけのほうがMasonryっぽいと勝手に思ったからです。

まずはjQuery Masonryを導入

まずは、jQuery Masonryを導入します。導入の仕方は、こちらを参考にしてください。
[み]jQuery Masonryの超基本的な使い方

まずは、コードです。

head内

<link rel="stylesheet" type="text/css" href="/apimasonry.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery.masonry.min.js"></script>
<script>
$(function(){
    $('.pics').masonry({
        itemSelector: '.pic',
        isFitWidth: true,
        isAnimated: true,
        duration: 1000,
        easing: 'swing'
    });
});
</script>

PHP部分

<?php
$album_id = '251272561576865'; //アルバムID
$thumb_size_set = 3; //サムネイルサイズ
$limit = 0; //枚数(0は全部)

$url = "http://graph.facebook.com/".$album_id."/photos/?limit=".$limit;
$json = file_get_contents($url);
$data_array = json_decode($json, TRUE);

if(!empty($data_array["data"])){
    foreach($data_array["data"] as $values){
        $thumb_size_count = count($values["images"]);
        for($i=$thumb_size_set; $i > 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 '
        <div class="pic"><a href="'
.$link.'" target="_blank"><img src="'.$source.'" width="'.$width.'" height="'.$height.'" alt="'.$name.'" /></a><br />
        </div>'
;
    }
}
?>

あとは、↑これを、div class=”pics”で囲ってやるとOKです。

このコードだとこんなカンジになります。
FacebookのGraph APIを使って、アルバムの写真を取得してjQuery Masonryを使って表示するサンプル その1

とても残念な見た目ですね。おそらく、画像のheightを取得する前に、jQuery Masonry側でdivのheightを決めてしまうためにこうなっているんだと思います。そのため、ブラウザのウィンドウサイズを変更すると、キレイに表示されます。その時点では画像の読み込みが完了しているからですね。たぶんw

最初からキレイに表示する方法

画像読み込みが完了した後でjQuery Masonryを動作させたい場合は、imagesLoadedというメソッドを指定します。

$(function(){
    var $pics = $('.pics');
    $pics.imagesLoaded(function(){
        $pics.masonry({
            itemSelector: '.pic',
            isFitWidth: true,
            isAnimated: true,
            duration: 1000,
            easing: 'swing'
        });
    });
});

これで、最初から画像をきちんと読み込んでキレイに表示されます。
FacebookのGraph APIを使って、アルバムの写真を取得してjQuery Masonryを使って表示するサンプル その2

jQuery Masonryを使うときには、ほとんどの場合で画像が含まれてくると思うので、基本的にimagesLoadedを指定したほうが、あとから悩まなくて済むんじゃないでしょうか?特に、何でもかんでもコピペしてクリアしてきたみはらみたいな方であれば、なおさら、imagesLoadedを指定したやつを使いまわすといいと思いますよ:)

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup