2007-10-24

jQuery Cycle Plugin とフォートラベル API で旅行写真をシャッフル表示する

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて、見つかった旅行記の写真(大)を img 要素として追加します。

次に JQuery Cycle Plugin の shuffle を使って、旅行写真(大)をシャッフルしながら繰り返し表示します。shuffle という効果はそのほかの効果と比べて、機械的な印象が薄く、少し人の雰囲気を感じるので気に入りました。

デモを見る


jQuery(function($) {

$('#f').submit(function(e) {
var c = $(this.c1).val()
+ '-'
+ $(this.c2).val();

var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php'
+ '?callback={fn}';
var params = $.param({
format: 'jsonp',
zip: c,
max: 3
});

$('#r').empty();

$('#i')
.show()
.jsonp(url+'&'+params, function(response) {
$(this).hide();

if (response.error)
return;

$.each(response, function(i, album) {

$('<img />')
.attr('alt', this.albumtitle)
.attr('src', this.picture.replace(/sml/g, 'lrg'))
.attr('width', 400)
.attr('height', 300)
.appendTo('#r');

$.each(this.pictinfo, function() {

$('<img />')
.attr('alt', album.albumtitle)
.attr('src', this.picturl.replace(/sml/g, 'lrg'))
.attr('width', 400)
.attr('height', 300)
.appendTo('#r');
});

}); //$.each

$('#r').cycle('shuffle');

}); //.jsonp

return false;

}).submit(); //.submit

}); //jQuery


ひとりたび2年生ひとりたび2年生
たかぎなおこ

ひとりたび1年生 30点かあさん のほほん風呂  おうちでカンタン季節の湯 らくウマ!どんぶりレシピ 独りでできるもん3

by G-Tools

0 件のコメント: