CODEWITHSUNDEEP
ajax
Matthew Chambers
Matthew Chambers

Reputation: 877

How do they do this, ajax, json

I have been tasked with adding some functionality to a site similar to this screen on flickr.

Does anyone have any idea how they do the photostream on the right. The images are not in the javascript, json or there is no ajax request.

It would be really useful if anyone had an idea how they did this.

Upvotes: 0

Views: 73

Answers (2)

e-Learner
e-Learner

Reputation: 517

1st There is ajax request when you scroll thumbnails on the right. And I think that they make an ajax request with the last photo ID in the stream, the next pic in database or prev and the user who uploaded pics and surely others params... You want a script file that will give you picture thumb encoded in base64, url of the picture and next pictures id in database..

Example

$("#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);
    }
})
})

Look at URL

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

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

Upvotes: 0

Jon Taylor
Jon Taylor

Reputation: 7905

There is an AJAX request performed as you scroll.

Open the console in your browser and look at the network tab. It will show a link similar to this:

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

This is the restful link which returns JSON data. This JSON data contains the urls for the thumbnails of each of the photos, plus other information.

Upvotes: 1

Related Questions