Question

我正在尝试使用Galleria（http://galleria.aino.se/）导入/显示来自Flickr照片流（或设置）的照片。我在Galleria文档中找不到任何有用的信息。如何去做？

Answer 1

最简单的方法是使用Flickr的JSON Feed作为照片集。

1。获取Feed

确保您尝试使用的设置通过Flickr的“整理”菜单设置为公开，然后查看该设置并在页面底部找到RSS链接。 RSS源默认为XML格式;要获取JSON版本，只需将&format=json&jsoncallback=?添加到URL的末尾：

RSS Feed：http://api.flickr.com/services/feeds/photos_public.gne?id=xyzexample&lang=en-us

变为

http://api.flickr.com/services/feeds/photos_public.gne?id=xyzexample&lang=en-us&format=json&jsoncallback=?

2。解析JSON

此示例使用jQuery，因此请记住在此代码之前包含jQuery文件。这也假设你的Galleria div的id为'gallery'：

<script type="text/javascript">
$().ready(function() {
  // JSON feed from Flickr
  var feedUrl = "http://api.flickr.com/services/feeds/photos_public.gne?id=xyzexample&lang=en-us&format=json&jsoncallback=?"

  // parse JSON using jQuery's built-in function
  $.getJSON(feedUrl, function(data) {

        // iterate through each item
        $.each(data.items, function(i, item) {
            // create image node in DOM and update it's src attribute
            // _m = medium img, _b = large; remove the replace function if you want the standard small images
            $("<img/>").attr("src", item.media.m.replace("_m", "_b"))
                // add image to gallery container
                .appendTo("#gallery")
                // add a link to each image - this will go to the photo on Flickr
                .wrap('<a href="' + item.link + '" target="_blank"></a>');
        });
});
</script>

3。添加Galleria

在'gallery'div上启动Galleria插件：

$("#gallery").galleria();

（显然你需要包含Galleria插件和主题，按照their documentation）

Answer 2

从1.2.4版本的Galleria下载中包含一个Flickr插件，可以让这些事情变得非常简单。以下是插件的文档，包括示例：http://galleria.aino.se/docs/1.2/plugins/flickr/

使用Galleria jQuery插件显示Flickr照片

2 个答案:

1。获取Feed

2。解析JSON

3。添加Galleria