1

365 プロジェクトの写真を表示するフォトブログを作成しています。これは私が現在持っているものです。フォトストリーム全体を一度に返します...

    $.getJSON('http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&api_key=ea494d6b294a94aed2a1f5a04530e387&user_id=57288432@N00&extras=description,date_taken&jsoncallback=?',

function(data){
    $.each(data.photos.photo, function(i, rPhoto){
        var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
        var thumbPhotoURL = basePhotoURL + '.jpg';
        var mediumPhotoURL = basePhotoURL + '_b.jpg';

        var photoStringBuild = '<article style="background-image:url(' + thumbPhotoURL + ')"> <span class="info"><h1><a href="' + mediumPhotoURL + '" title="' + rPhoto.title + '">' + rPhoto.title + '</a></h1><h2>' + rPhoto.datetaken + '</h2><p>' + rPhoto.description._content + '</p></span> </article>';

            photoStringBuild : photoStringBuild ;

        $(photoString).appendTo("#flickr");
    });
});

これは機能します。こちらをご覧ください ( http://hey.ac )。私がやりたいことは、無限スクロール機能を追加して、ブラウザーが下にスクロールされると写真が段階的に読み込まれるようにすることです。

見栄えの良いInfinite Scroll ( https://github.com/paulirish/infinite-scroll ) をダウンロードしました。これは、私の jQuery ハッキング能力の範囲内です。私は readme に目を通し、JSON セクションには、私が使用すべきものに近いように見える次のコードが提供されています...

  $('#flickr').infinitescroll({
  // other options
  dataType: 'json',
  appendCallback: false
}, function(json, opts) {
  // Get current page
  var page = opts.state.currPage; 
  // Do something with JSON data, create DOM elements, etc ..
});

これを理解するのに役立ついくつかの指針が欲しいです。乾杯、アリ

4

0 に答える 0