このサンプルは、Flickrの写真を検索してjQueryのGallerifficプラグインで表示します。サンプルが表示されたら写真の個数と検索キーワードを入力して[Find]をクリックします。しばらくすると左側にサムネイルが表示されます。サムネイルをクリックすると右側に拡大表示されます。写真の個数が12個以上のときは、タブが表示されますのでタブをクリックしてサムネイルを切り替えます。スライドショーを表示するには、拡大されたイメージの左上の「Play Slideshow」をクリックします。手動で切替するには、右側の「Previous Photo」「Next Photo」をクリックします。このサンプルは、最大96個の写真を表示させることができます。
このサンプルは、Yahoo! PipesのFlickrモジュールを利用して写真を検索します。
Yahoo! Pipesは、REST/JSONPインタフェースを利用しています。
template = $('#flickr').html().replace('', '');
$('#find').click(function() {
$(this).hide();
$('.loading').show();
var keyword = encodeURI($('#txtKeyword').val());
var count = $('#ddlCount').val();
$.getJSON('http://pipes.yahoo.com/pipes/pipe.run'
+ '?_id=...ここにYahoo! PipesのIDを記述します...' + '&_render=json'
+ '&tag=' + keyword + '&count=' + count
+ '&_callback=?',
function(data) {
var pics = data.value.items;
var html = '';
for (var i in pics) {
// "http://static.flickr.com/2612/4028191679_fcba16588a_s.jpg"
var title = pics[i].title;
var thumb = pics[i]['media:group']['media:thumbnail'].url;
var large = thumb.replace('_s.jpg', '.jpg');
html += template.replace('@large', large).replace('@title', title)
.replace('@thumb', thumb).replace('@title2', title);
}
$('#flickr').empty().html(html);
$('#find').show();
$('.loading').hide();
gallery();
}
);
return false;
});
このサンプルを作成するには、以下の書籍を参照してください。