Webページ作成覚書: Flickr：Setの写真を表示する（Masonryを使ってタイル風）

サンプル

「Flickr：Setの写真を表示する」をMasonryに対応するように変更した。
場合によっては、「Flickr：Setの写真を表示する」に記載した方法が良い場合もある。

参考：jQueryで可変グリッド・Masonryプラグイン

（なぜか、http://www.geocities.jp/winchester_cathedral_nostalgy/tips/FlickrPhotoSet_tile/index.html では、window.resizeが機能しない。
http://cgi.geocities.jp/winchester_cathedral_nostalgy/tips/FlickrPhotoSet_tile/index.html を使用。）

◆ html

コードは下記のとおり。

以下のjavascriptファイルを使用する。
jquery.js　－　ここからダウンロード
masonry.pkgd.min.js　－　ここからダウンロード

<!DOCTYPE html>
<html lang="ja">
<head> 
<meta charset=UTF-8">
<title>FlckrPhotoSet</title> 
<link rel="stylesheet" href="Flickr_photoset.css">
<script src="jquery.js"></script>
<script src="masonry.pkgd.min.js"></script>
<script src="Flickr_photoset.js"></script> 
 
<script>
 var photoset_id = '72157635974998255'
 var consumerKey = 'f4bc240df0b0418fb80e3719ec173dc0';
</script> 
 
</head> 
 
<body> 
 <div id="header">Loading...</div>
 <div id="contents">Loading...</div> 
</body> 
 
</html>

Masonryを使用するため、8行目を追加した。

◆ javascript(Flickr_photoset.js)

var list;
var photoset_owner;
 
window.onresize = function(){
 
// #contentsの高さを全体の高さからtopの高さと20pxとを引いた高さにする
 var document_height = $(document).height();
 var header_height = $(header).height();
 document.getElementById('contents').style.height = (document_height - header_height-20) + "px";
 
}
 
window.onload = function () {
 ShowPhotos();
}

6～9行目：
リサイズにはMasonryが対応してくれるので処理は不要。
#contentsの高さをウインドウに合わせて定義している。
こうしないと、#headerを固定して#contents部分だけをスクロールすることができない。

ShowPhotos()
htmlで定義した（photoset_id）photosetの情報を取得する。

function ShowPhotos () {
 
// Header
 // callback関数の生成
 window[ 'jsonHeader'] = function(obj){
 
  var description_ = obj.photoset.description._content.replace(/\n/g,"<br/>");
  var $title = $("<div>").html(obj.photoset.title._content).addClass("header_title"); // タイトルのタグを作成
  var $caption = $("<p>").html(description_).addClass("header_caption"); // キャプションのタグを作成
  var $div = $("<div>").append($title).append($caption); // div要素にタイトルのタグとキャプションのタグを追加
  $("#header").html($div); // 上記で作成したタグでid="header"の要素のタグを置き換え
 
 };
 
 // リクエスト
    var arguments = { 
         api_key: api_key,
   photoset_id: photoset_id,
   format: "json",
   jsoncallback: "jsonHeader",
   method: "flickr.photosets.getInfo"
    };
 flickrRest(arguments);
 
// Photos
 // callback関数の生成
 window[ 'jsonPhotos'] = function(data){
      list = data.photoset.photo;
  photoset_owner = data.photoset.owner;
  Album();
 
 };
 
 // リクエスト
    var arguments = { 
         api_key: api_key,
   photoset_id: photoset_id,
   format: "json",
   jsoncallback: "jsonPhotos",
   method: "flickr.photosets.getPhotos",
   extras: "geo,date_taken,owner_name,description,o_dims"
    };
 flickrRest(arguments);
 
}

ここは変更なし。

Album()
photosetの写真、タイトル(title）、descriptionを表示する。

function Album () {
 
// #contentsの高さを全体の高さからtopの高さと20pxとを引いた高さにする
 var document_height = $(document).height();
 var header_height = $(header).height();
 document.getElementById('contents').style.height = (document_height - header_height-20) + "px";
 
    var $box = [];
    var $contents = $('#contents').html("");
 
    for( var i=0; i<list.length; i++ ) {
 
        var photo = list[i];
 
  var src = 'http://www.flickr.com/photos/' + photoset_owner + '/' + photo.id + '/in/set-' + photoset_id;
  var $ahref = $('<a>', { href: src, target: '_blank' });
  var src = 'http://static.flickr.com/' + photo.server + '/' + photo.id+ '_' + photo.secret + '.jpg';
  var $img = $('<img>', { 'src': src });
  var $div = $('<div class="box">').append($ahref).append($img);
  if ( photo.title != "") {
   var $photoTitle = $('<div >', { class: "photo_title", text: photo.title });
   $div.append($photoTitle);
  }
  if ( photo.description._content != "" ){
   var caption = photo.description._content.replace(/\n/g,"<br/>")
   var $photoCaption = $('<div>', { class: "photo_caption", text: caption });
   $div.append($photoCaption);
  }
  $contents.append($div);
  $box[i] = $div;
 }
 
 $('#contents img').bind('load',function(){
    masonryBox ($contents,$box); 
 });
 
}

8,9行目を変更。
30,31行目を変更。
34～36行目を変更。

19行目：画像を読み込み中にfloatで表示させるため、classをしています。

尚、4～6行目では、#contentsの高さをウインドウに合わせて定義している。
こうしないと、#headerを固定して#contents部分だけをスクロールすることができない。

masonryBox()
masonryを用いて表示する。

function masonryBox ($container,$box) {
 
 var $div = $('<div id="masonry_list">');
 
    for( var i=0; i<$box.length; i++ ) {
  var $tmp = $('<div>', { class: "item", style: "margin:5px;" }).append($box[i]);
  $div.append($tmp);
 }
 
 $container.html("")
           .append($div);
 
 $('#masonry_list').masonry({
         isAnimated: true,
         duration: 400,
         itemSelector: '.item',
         isFitWidth: true
 });
 
}

6行目："margin:5px;"にしないと、写真の間に間隔がなく、くっついて表示されてしまう。

flickrRest()
FlickrにArgumentsを送付する関数

function flickrRest (arguments) {
 
    // APIリクエストURLの生成
    var url = 'https://www.flickr.com/services/rest/?'+
               obj2query(arguments);
 
    // 　script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
 
}
 
// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
     var list = [];
     for( var key in obj ) {
         var k = encodeURIComponent(key);
         var v = encodeURIComponent(obj[key]);
         list[list.length] = k+'='+v;
     }
     var query = list.join( '&' );
     return query;
 
}

ここは変更なし。

◆ css

* {
 margin: 0px;
 padding: 0px;
}
 
html, body {
 height:  100%;
 margin: 0px;
 padding: 0px;
 overflow: hidden;
}
 
#header {
 background-color: white;
}
 
#contents {
 overflow: scroll;
 background-color: #EFE;
}
 
.box {
 float: left;
 margin: 5px;  
}
 
.header_title {
    text-align: left; 
    margin: 0px;  
 font: bold 32px arial,sans-serif; 
 color: limegreen;
}
 
.header_caption {
    text-align: left; 
    margin: 10px;  
 font: 14px arial,sans-serif;
    color: black; 
}
 
img {
 border: none;
}
 
.photo_title {
 text-align: left;  
    margin: 0px;
 font: bold 16px arial,sans-serif; 
 text-decoration: none;
 color: black; 
}
 
.photo_caption {
    text-align: left; 
    margin: 0px;  
 font: 16px arial,sans-serif;
    color: black; 
}

22～25行目：画像を読み込み中にfloatで表示させています。

以上

ページ

2015-01-03

Flickr：Setの写真を表示する（Masonryを使ってタイル風）

サンプル

◆ html

◆ javascript(Flickr_photoset.js)

◆ css