このサンプルは、YoutuTubeのビデオを検索してZoomboxに表示します。サンプルが表示されたらテキストボックスに検索キーワードを入力して[Search YouTube!]ボタンをクリックします。ビデオのサムネイルが表示されたらお好きなビデオをクリックします。ビデオがZoomboxに拡大表示されたら[Play]ボタンをクリックして再生します。ビデオの最下位にタイトルと左右のボタンが表示されます。ビデオを切り替えるには、左右のボタンをクリックします。ズームボックスを閉じるには、右上の[X]をクリックします。
このサンプルは、Yahoo! Pipes経由でYoutuTubeにRESTでリクエストしてレスポンスをJSONPで取得します。そして、jQueryのZoomboxプラグインで拡大表示します。
$.getJSON('http://pipes.yahoo.com/pipes/pipe.run'
+ '?_id=...Your Yahoo! Pipes ID...' + '&_render=json'
+ '&vq=' + keyword
+ '&_callback=?',
function(data) {
var videos = data.value.items;
var temp = template;
var html = '';
for (var video in videos) {
var url = videos[video]["media:group"]["media:player"].url;
var title = videos[video]["media:group"]["media:title"].content;
var src = videos[video]['media:group']['media:thumbnail'][0].url;
html += temp.replace('@url', url).replace('@title', title).replace('@src', src);
}
$('#videos').empty().html(html);
zoombox.init();
$('#btnSearch').attr('disabled', '');
$('.loading').hide();
}
);