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

您的服务器需要有 url，它返回一个 json 数组，每个图像包含三个链接，或者足够的信息来构建这三个链接。您可以使用 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=?";

这是一个“RESTful API 端点”，它从 flickr 返回图像（基本上是一个您可以调用的 URL，它告诉您一堆图像）。

jQuery.getJSON(url, function(data)

进行 ajax 调用以从 url 获取数据。它返回一大堆 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 返回的数组中的每条记录，此代码会生成一个新项目，其中包含三个 url，一个用于缩略图（默认情况下会看到），一个用于“放大缩略图”，您似乎得到了通过点击空间，如果您单击，链接将带您进入。images变量最终是这些对象的数组，它被传递给回调函数，我认为它会生成视图：

    callback(images);

所以最终你需要做的是在你的服务器上创建一个 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 回答