Javascript JQuery 3D图库（雪堆）和#x2013；如何从服务器而不是flickr调用图像？

我最近发现了SnowStack，它允许创建一个3D风格的画廊，效果可以在这里看到

我现在正在浏览源代码，因为我试图找到一种方法，让它从我的服务器上加载图像，而不是使用FlickrAPI从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);
});
}

还有一小部分文档可用，但alas似乎没有按照建议操作：

---

非常感谢您的光临，您可以自由地为这个SnowStack Gallery推荐更好的替代品，您认为它比这个更合适/更便于浏览

您的服务器需要有一个url，该url返回一个json数组，每个图像有三个链接，或者有足够的信息来构建这三个链接。您可以使用nodejs、asp.netmvc或硬编码响应来实现这一点。我将快速解释一下发生了什么：

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

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

进行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返回足够的信息来构建三个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);
});

---

似乎那个插件的文档还不够。我也注意到了，肯定没有足够的帮助。Juanpstas试图通过通读代码来理解一些道理，但它相当长…@Juanpstas–也发现了这个[]；现在尝试一下，但它似乎不能正常工作！哇！那太好了，现在更有意义了。这听起来可能很愚蠢，但我是一个初学者，因此，您能否编写一个示例（jsfiddle，甚至只是一个链接？）来演示如何让服务器直接返回数据？我有点了解现在发生的事情，但我不知道从哪里开始……@CasperF我添加了一个例子。

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