Ulysses

flickr

因为一个小小的制作，需要显示来自于 Flickr 上的最新更新的相片信息，正如很多人的博客的边栏中显示的那样。这里，我只需要利用 Flickr 提供的 JSON 格式的 feed 数据便可。开始之前，我们需要了解下面的内容：

• JSON – JavaScript Object Notation
• jQuery 的 Ajax Requests
• Flickr Services 的 JSON Response Format

注意到 Flickr 的文档中提到的回调函数(Callback Function)，我们可以使用默认的回调函数，也可以通过将 nojsoncallback 设置为 1 ，从而去掉默认的回调函数。

在 jQuery.getJSON() 请求中，我们也可以指定回调函数。

如下代码，可以让我们获取到 JSON 数据：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08&lang=zh-cn&format=json&nojsoncallback=1";, function(data) {});

这里使用 nojsoncallback 参数去掉了默认的回调函数，如果要指定回调函数，使用如下语法：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08&lang=zh-cn&format=json&jsoncallback=?", function(data) {});

注意不要遗漏 jsoncallback=? 中的“?”符号。

上面调用的 feed ，返回的是公开的相片，考察 JSON 的格式，我们通过下面的代码来生成相片显示的 HTML 代码：

var html = ""; // 输出 HTML 代码
var src = ""; // 相片路径
$.each(data.items, function(i, item) {
/*
* JSON 文件中是提供的是中等尺寸缩略图
* 这里对应替换为小尺寸（75px*75px）的缩略图
*/
src = (item.media.m).replace("_m.jpg", "_s.jpg");
html += "<a href=\"" + item.link + "\" target=\"_blank\"><img src=\"" + src + "\" \/><\/a>";
});

现在，只需要将 HTML 代码填充进指定的元素内即可：

$("#flickr_photos").html(html);

完整代码如下：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08〈=zh-cn&format=json&nojsoncallback=1", function(data) {
var html = ""; // 输出 HTML 代码
var src = ""; // 相片路径
$.each(data.items, function(i, item) {
/*
* JSON 文件中是提供的是中等尺寸缩略图
* 这里对应替换为小尺寸（75px*75px）的缩略图
*/
src = (item.media.m).replace("_m.jpg", "_s.jpg");
html += "<a href=\"" + item.link + "\" target=\"_blank\"><img src=\"" + src + "\" \/><\/a>";
});

$("#flickr_photos").html(html);
});

你可能会发现，在本地测试，上面的代码运行正常，但是发布到远程地址，就会出现“没有权限”的错误，这是因为 Ajax 的跨域安全问题引起的。

在这里，我们可以另外编写一份 PHP 代码来实现代理，代码内容很简单：

echo file_get_contents('http://api.flickr.com/services/feeds/photos_public.gne?id=42657763@N08&lang=zh-cn&format=json&nojsoncallback=1');

将这份 php 文件保存为 feed.php ，将 JavaScript 中的 Flickr Feed 地址替换为这份 PHP 文件所在的地址即可（注意路径）。

最后的演示效果，可以查看《使用 jQuery 显示来自 Flickr Feed 的相片》。

如何显示你的相片？

只需要将 Flickr Feed 中 id 内容替换为你的便可。