Question

我最近发现了SnowStack，它允许创建一个3D风格的画廊，效果可以在这里看到http://www.satine.org/research/webkit/snowleopard/snowstack.html

我现在正在阅读源代码，因为我正试图找到一种方法来从我的服务器上加载图像，而不是使用Flickr API从Flickr加载随机图像。

如果我有一个猜测，它就在这里需要进行更改，但我在JavaScrip / JQuery上有点新手，所以如果有人可以帮我正确调整代码，那么我将不胜感激至于使它从我服务器上的文件夹加载图像。

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

还有一些文档可用，唉似乎没有按照建议操作：https://code.google.com/p/css-vfx/wiki/SnowStack

非常感谢，并且可以随意为这个SnowStack Gallery提供更好的替代方案，您认为这些方案更适合/更适合浏览器！

Answer 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}对象列表中。您可以让服务器直接返回该数据，然后您就不需要映射功能。

修改

好的，那你如何从服务器返回这些数据呢？我将使用node作为一个快速而肮脏的示例，我们将创建一个服务器，它只返回几个完全符合所需数据的项目。

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

使用此数据，您只需在获取网址时使用以下代码：

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

JQuery 3D Gallery（SnowStack） - 如何从服务器而不是flickr调用图像？

1 个答案: