このサンプルは、Googleのイメージを検索するWebサービスを利用して検索結果を表示します。テキストボックスに検索キーワードを入力したら[Search..!]ボタンをクリックします。イメージのサムネイルをクリックすると拡大表示されます。
var keyword = $('#txtKeyword').val();
var url = 'http://ajax.googleapis.com/ajax/services/search/images?callback=?';
var params = {
v: '1.0',
q: keyword,
rsz: 'large',
hl: 'jp'
}
$.getJSON(url, params, function(data) {
var results = data.responseData.results;
var html = '';
for (var i in results) {
var imageId = results[i].imageId;
var title = results[i].title;
var title2 = results[i].titleNoFormatting;
var content = results[i].content;
var content2 = results[i].contentNoFormatting;
var tbUrl = results[i].tbUrl; // thmubnail
var url = results[i].url; // full size image
var ueUrl = results[i].unescapeUrl;
var vUrl = results[i].visibleUrl;
var titleDesc = content2 + ', ' + title2;
html += template.replace('@url', url).replace('@title', titleDesc)
.replace('@src', tbUrl);
}
$('#images').empty().html(html);
}); // end of getJSON