Question

我的任务是为网站similar to this screen on flickr添加一些功能。

有没有人知道他们如何做右边的照片流。图像不在javascript，json或没有ajax请求。

如果有人知道他们是如何做到的，那将非常有用。

Answer 1

滚动时会执行AJAX请求。

在浏览器中打开控制台，然后查看网络选项卡。它会显示与此类似的link：

http://www.flickr.com/services/rest/?format=json&clientType=yui-3-flickrapi-module&api_key=8800e2eb03db7fb99992039f14061dcf&auth_hash=e65c85db55a2671d8d5968171150c516&auth_token=&secret=9978895fa92da630&photo_id=3396195710&num_prev=4&num_next=0&order_by=&extras=url_sq%2Curl_q%2Curl_t%2Curl_s%2Curl_m%2Curl_z%2Curl_c%2Curl_l%2Curl_o%2Cvideo_size%2Cowner_name%2Cpath_alias%2Cicon_server%2Cneeds_interstitial%2Ccount_comments%2Ccount_faves%2Curl_h%2Curl_k&method=flickr.photos.getContext&jsoncallback=YUI.flickrAPITransactions.flapicb23&cachebust=1358811052893

这是返回JSON数据的restful链接。此JSON数据包含每张照片缩略图的网址以及其他信息。

Answer 2

第1页在右侧滚动缩略图时有一个ajax请求。而且我认为他们制作了一个ajax请求，其中包含流中的最后一张照片ID，数据库中的下一张照片或上一张照片以及上传照片的用户以及肯定是其他游戏... 你想要一个脚本文件，它会给你在base64编码的图片大拇指，图片的url和数据库中的下一个图片id ..

实施例

$("#photostream > .scroll").click(function(){
    leftOrRight = $(this).attr("id"); // Assume that there is two buttons to get next or previous img with id #next and #prev
    $.ajax({
        type: "GET",
        url: urlOfTheScriptFileThatWillProvideYouData.php, //aspx, jsp ...
        dataType: "json",
        data: "userId, photoId, leftOrRight",
    success: function(yourJson) {
        //... Do something with your data and append it in the slider etc..;

    },
    error: function (xhr, textStatus, errorThrown) {
        $("#error").html(xhr.responseText);
    }
})
})

查看网址

http://www.flickr.com/photos/roblawton/3847619643/in/photostream/

http://www.flickr.com/photos/USER-ID/PHOTO-ID/in/photostream/

他们是怎么做到的，ajax，json

2 个答案: