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年生 たかぎなおこ by G-Tools