0

我的任务是向与 flickr 上的此屏幕类似的站点添加一些功能。

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

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

4

2 回答 2

1

滚动时执行 AJAX 请求。

在浏览器中打开控制台并查看网络选项卡。它将显示一个类似于此的链接：

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 数据的宁静链接。此 JSON 数据包含每张照片的缩略图的 url，以及其他信息。

于 2013-01-21T23:34:49.603 回答
0

第一个当您滚动右侧的缩略图时有ajax请求。而且我认为他们使用流中的最后一张照片 ID、数据库或 prev 中的下一张图片以及上传图片的用户以及其他参数...在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/

于 2013-01-21T23:57:43.750 回答