Webページ作成覚書: Flickr：Setの写真を表示する

サンプル

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

タイリングで配置したい場合はこちらを参考に。

◆ html

コードは下記のとおり。

以下のjavascriptファイルを使用する。
jquery.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="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>

◆ javascript(Flickr_photoset.js)

4-6行目：
windowがリサイズされたとき、PhotoList()を実行して、１行当たりの写真の数をwindowサイズに合わせて表示する〔ﾘﾝｸ〕。

var list;
var photoset_owner;
 
window.onresize = function(){
 Album();
}
 
window.onload = function () {
 ShowPhotos();
}

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 style="float: left; margin: 5px;">').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;
   }
 
 var $img = $('#contents img');
 
 var imgIndex = 0;
  $img.bind('load',function(){
 
  imgIndex++;
 
  if ( imgIndex >= $img.length ) {
   photoTable ($contents,$box); 
    }
 
 
 });
}

photoTable()
写真とタイトル、キャプションをウィンドーの幅に合わせて表示する。

function photoTable ($container,$box) {
 
 var border = 0;
 var cellpadding = 5;
    var windowMargin = 10;
 
 var $html = $('<div>');
   var td_num = 0;
 var colPix = 0;
    for( var i=0; i<$box.length; i++ ) {
 
  var imgWidth = $box[i].width();
//var imgWidth = $('#contents img').eq(i).width();
 
  if ( colPix+imgWidth+2*cellpadding > $(document).width() - 2*windowMargin ) {
   td_num = 0;
   colPix = 0;
   $table.append($tr);
   $html.append($table);
  }
 
     if (td_num == 0) {
   var $table = $('<table>', { border:  border});
   var $tr = $('<tr>');
    }
 
  var $td = $('<td>').css("padding", String(cellpadding) + "px").append($box[i].html());
  colPix += imgWidth+2*cellpadding;
 
  $tr.append($td);
     if (i == $box.length-1) {
   $table.append($tr);
   $html.append($table);
     }
 
     td_num++;
 
 }
 
 $container.html($html);
 
}

画像の隙間をtableのcellpaddingで設定した場合、　cssで、* { margin: 0; padding: 0 }　を定義しているとcellpaddingが効かない。
td のpadding で設定すればうまくいく。

尚、引数$boxが以下の通りだと12行目のwidth()の取得がうまくいかない。

var $contents = $('#contents').html("");
 
 
   $box[i] = $(html_tmp);
  $contents.append($(html_tmp));
 
 
   photoTable ($contents,$box);

以下の通りとしなければならない。

$box[i] = $(html_tmp);
  $contents.append($box[i]);
 
  photoTable ($contents,$box);

$box[i]をhtmlに実装しておかなくては、width()は取れないので、当たり前ではあるが．．．

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;
 
}

2013-11-09改定

2013-11-17改定

2014-12-31改定　
flickrRest()を変更（$.ajaxを使わないようにした）

2015-01-04改定　
photoTable()を引数で引き継ぐように変更（名前も変更した）
photoTable()で、画像の隙間の設定をtdのpaddingで行うようにした。

以上

ページ

2013-09-16

Flickr：Setの写真を表示する

サンプル

◆ html

◆ javascript(Flickr_photoset.js)