使用 Galleria jQuery 插件显示 Flickr 照片答案

【问题标题】：Displaying Flickr photos using the Galleria jQuery plugin使用 Galleria jQuery 插件显示 Flickr 照片
【发布时间】：2011-04-30 17:02:19
【问题描述】：

我正在尝试使用 Galleria (http://galleria.aino.se/) 从 Flickr 照片流（或设置）中导入/显示照片。我在 Galleria 文档中找不到任何有用的信息。该怎么做呢？

【问题讨论】：

标签： javascript jquery plugins flickr galleria

【解决方案1】：

最简单的方法是使用 Flickr 的 JSON 提要制作照片集。

1。获取提要

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

RSS 提要：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。添加画廊

在“画廊”div 上启动 Galleria 插件：

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

（显然您需要包含 Galleria 插件和主题，根据 their documentation）

【讨论】：

【解决方案2】：

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

【讨论】：