0

I recently discovered SnowStack, which allows for the creation of a 3D-style gallery, the effect can be seen here http://www.satine.org/research/webkit/snowleopard/snowstack.html

I'm going through the source code now, because I'm trying to find a way of getting it to load images off my server instead of loading random images from Flickr using the Flickr API.

If I had a guess, it's somewhere around here that changes need to be made, but I am a bit of a novice at JavaScrip/JQuery, so would appreciate if someone could help me with the correct way to tweak the code so as to make it load images from a folder on my 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 also a tiny bit of documentation available, which alas does not seem to operate as suggested: https://code.google.com/p/css-vfx/wiki/SnowStack

Many thanks in advance and feel free to suggest better alternatives to this SnowStack Gallery that you think are better fitted/ more browser-friendly than this!

4

1 に答える 1

1

サーバーには、画像ごとに 3 つのリンクを含む json 配列を返す URL、またはそれらの 3 つのリンクを構築するのに十分な情報が必要です。これは、nodejs、asp.net mvc、または最初からハードコーディングされた応答で行うことができます。何が起こっているのかについて簡単に説明します。

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=?";

これは、flickr から画像を返す「RESTful API エンドポイント」です (基本的には、呼び出すことができる URL であり、一連の画像について通知します)。

jQuery.getJSON(url, function(data)

URL からデータを取得するために ajax 呼び出しを行います。大量の json を返しますが、さらに下を見ると、data.photos.photoアイテムの後にあるだけで、データは次のようになります。

"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"
        },// ...
    ]

次のコードでは、これらの配列を使用します。すべてのフィールドを使用するわけではなく、必要なリンクを作成するのに十分なだけであることがわかります。必要に応じて、サーバーはこれらのリンクを直接返すことができます。

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
    };
});

URL から返された配列内の各レコードに対して、このコードは、3 つの URL を含む新しいアイテムを生成します。スペースを押すと、クリックするとリンクが表示されます。変数はimages最終的にこれらのオブジェクトの配列になり、コールバック関数に渡され、ビューを生成すると推測されます。

    callback(images);

したがって、最終的に行う必要があるのは、3 つの URL を構築するのに十分な情報を返すサーバー上に URL を作成し、返されたデータを {thumb, zoom, link } オブジェクトのリストにマップする同様の関数を用意することです。サーバーにそのデータを直接返させるだけで、マッピング関数は必要ありません。

編集

では、このデータをサーバーからどのように返すのでしょうか? 簡単で汚い例としてノードを使用します。必要なデータに正確に適合するいくつかの項目を単純に返すサーバーを作成します。

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');

このデータを使用すると、URL を取得するときに次のコードを使用できます。

var url = "http://127.0.0.1:1337";
jQuery.getJSON(url, function(data) {
    callback(data);
});
于 2013-05-06T02:24:09.797 に答える