javascript - JQuery 3D Gallery (SnowStack) – how do I call images from my server instead of flickr? -

i discovered snowstack, allows creation of 3d-style gallery, effect can seen here http://www.satine.org/research/webkit/snowleopard/snowstack.html

i'm going through source code now, because i'm trying find way of getting load images off server instead of loading random images flickr using flickr api.

if had guess, it's somewhere around here changes need made, bit of novice @ javascrip/jquery, appreciate if me correct way tweak code make load images folder on server instead.

function flickr(callback, page) { var url = "http://api.flickr.com/services/rest/?method=flickr.interestingness.getlist&api_key=60746a125b4a901f2dbb6fc902d9a716&per_page=21&extras=url_o,url_m,url_s&page=" + page + "&format=json&jsoncallback=?";  jquery.getjson(url, function(data)  {     var images = jquery.map(data.photos.photo, function (item)     {         return {             thumb: item.url_s,             zoom: 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg',             link: 'http://www.flickr.com/photos/' + item.owner + '/' + item.id         };     });      callback(images); }); } 

there's tiny bit of documentation available, alas not seem operate suggested: https://code.google.com/p/css-vfx/wiki/snowstack

many in advance , feel free suggest better alternatives snowstack gallery think better fitted/ more browser-friendly this!

your server needs have url on returns json array 3 links each image, or enough information construct 3 links. nodejs, or asp.net mvc, or hard-coded response start with. i'll give quick explanation what's going on:

var url = "http://api.flickr.com/services/rest/?method=flickr.interestingness.getlist&api_key=60746a125b4a901f2dbb6fc902d9a716&per_page=21&extras=url_o,url_m,url_s&page=" + page + "&format=json&jsoncallback=?"; 

this "restful api endpoint" returns images flickr (basically url can call, tells bunch of images).

jquery.getjson(url, function(data) 

makes ajax call data url. returns whole bunch of json, you'll see further below, we're after data.photos.photo items, data looks like:

"photo":     [         {             "id":"8707154801",              "owner":"38142969@n00",              "secret":"64b33dfc7b",              "server":"8401",              "farm":9,              "title":"veyron",              "ispublic":1,              "isfriend":0,              "isfamily":0,              "url_m":"http:\/\/farm9.staticflickr.com\/8401\/8707154801_64b33dfc7b.jpg",              "height_m":"332",              "width_m":"500",              "url_s":"http:\/\/farm9.staticflickr.com\/8401\/8707154801_64b33dfc7b_m.jpg",              "height_s":"159",              "width_s":"240"         },// ...     ] 

the next bit of code consumes array of these, , can see doesn't use fields, enough create links needs. server return links directly if like.

var images = jquery.map(data.photos.photo, function (item) {     return {         thumb: item.url_s,         zoom: 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg',         link: 'http://www.flickr.com/photos/' + item.owner + '/' + item.id     }; }); 

for each record in array returned url, code produces new item, 3 urls in it, 1 thumbnail (which see default), 1 "zoomed in thumbnail", seems hitting space, , 1 link take if click. images variable ends being array of these objects, passed callback function, presume generates view:

    callback(images); 

so need make url on server returns enough information construct 3 urls, , have similar function map returned data list of { thumb, zoom, link } objects. make server return data directly, , wouldn't need mapping function.

edit

ok, how return data server? i'll use node quick , dirty example, we'll create server returns couple of items fit data needed.

var http = require('http'); http.createserver(function (req, res) {   res.writehead(200, {'content-type': 'text/plain'});   res.end(json.stringify([{         thumb: "http://example.com/image1_thumb.jpg",         zoom: "http://example.com/image1_zoom.jpg",         link: "http://example.com/image1.jpg"     },     {         thumb: "http://example.com/image2_thumb.jpg",         zoom: "http://example.com/image2_zoom.jpg",         link: "http://example.com/image2.jpg"     }])); }).listen(1337, '127.0.0.1'); 

with data use following code when getting url:

var url = "http://127.0.0.1:1337"; jquery.getjson(url, function(data) {     callback(data); });