文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery 3D画廊(SnowStack) -如何从服务器而不是flickr调用图像？

问JQuery 3D画廊(SnowStack) -如何从服务器而不是flickr调用图像？
EN

Stack Overflow用户

提问于 2013-05-06 09:33:56

回答 1查看 327关注 0票数 0

我最近发现了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

javascript

jquery

回答 1

Stack Overflow用户

发布于 2013-05-06 10:24:10

您的服务器上需要有url，该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返回图片的“flickr端点”(基本上是一个你可以调用的网址，告诉你一堆图片)。

jQuery.getJSON(url, function(data)

执行ajax调用以从url获取数据。它返回一大堆data.photos.photo，但您将在下面进一步看到，我们只关注json项，数据类似于：

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

有了这些数据，您就可以在获取url时简单地使用以下代码：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16390901

复制

相似问题

问JQuery 3D画廊(SnowStack) -如何从服务器而不是flickr调用图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery 3D画廊(SnowStack) -如何从服务器而不是flickr调用图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery 3D画廊(SnowStack) -如何从服务器而不是flickr调用图像？
EN