12.3　教程：给站点添加Flickr图像

在本教程中，我们将所有内容组合到一起，从Smithsonian Institution获取照片feed，显示照片的缩略图像，并且添加到每张图像的链接，以便访问者可以单击缩略图进入Flickr，并看到照片的页面。

注意：参见本书1.3节的“注意”部分以了解如何下载教程文件的信息。

1.在文本编辑器中打开chapter12文件夹下的fickr.html文件。

首先，创建几个变量来存储需要发送给Flickr的URL的各个组成部分。

2.在$（document）.ready（）中的空行上单击，并且输入：

var URL="http：//api.flickr.com/services/feeds/photos_public.gne"；

var ID="25053835@N03"；

var jsonFormat="＆format=json＆jsoncallback=?"；

这里的每个变量都只是12.2.1节介绍的较长的URL的一部分。将每个片段分解为单独的变量，这使得很容易调整这段代码。例如，如果你想要从另一个Flickr用户那里获取一个照片feed，只要更改ID变量（如果你有一个Flickr账户，尝试将你的ID号插入到这里。如果你不知道自己的Flickr ID，访问http：//idgettr.com/）。

提示：如果想要获取来自一个Flickr群组的照片，例如Web Design Group，那么，在步骤2中将URL更改为http：//api.flickr.com/services/feeds/groups_pool.gne?id=37996591093@N01，将ID更改为该Flickr群组的ID。

接下来，组合这些变量以构建一个完整的URL。

3.在刚才输入的代码之后添加另外一行代码：

var ajaxURL=URL+"?id="+ID+jsonFormat；

这组合了所有的变量以及查询字符串的开始部分，即?id=，构成了一个完整的URL，就像在12.2.1节所看到的URL那样，http：//api.flickr.com/services/feeds/photos_public.gne?id=25053835@N03＆format=json＆jsoncallback=?。现在，应该进入Ajax部分，并且使用jQuery$.getJSON（）函数了。

4.在刚才添加的一行之后，输入：

$.getJSON（ajaxURL, function（data）{

}）；//end get JSON；

这是$.getJSON（）函数的基本shell：它将联系我们在步骤2和步骤3中构建的URL，并且接收从Flickr返回的数据。这些数据传递给一个匿名函数，并且存储在一个名为data的变量中。随后，可以使用这些数据并且开始在页面上使用它。首先，我们将获取该feed的标题，并且使用它替换当前页面上的＜h1＞标签。

5.将如下粗体所示的代码行添加到步骤4的代码中：

$.getJSON（ajaxURL, function（data）{

$（'h1'）.text（data.title）；

}）；//end get JSON；

这是一个基本的jQuery选择器（$（'h1'））和函数（.text（）），它们选择了当前页面上的＜h1＞标签，并且替换了其中的文本。实际的JSON feed存储在data变量中。要访问其组件，你可以使用点语法（参见本书2.10节），因此，data.title获取该feed的标题。如果现在保存页面并在浏览器中预览，将会看到一个粗体的标题显示“Uploads from Smithsonian Institution”。

要添加照片，需要循环遍历Flickr feed所返回的items对象（参见本书12.3节）。6.将如下粗体所示代码行添加到步骤5的代码中：

$.getJSON（ajaxURL, function（data）{

$（'h1'）.text（data.title）；

$.each（data.items, function（i, photo）{

}）；//end each

}）；//end get JSON；

4.10　节已介绍过.each（）函数，该函数用来遍历一个jQuery选择。$.each（）有所不同，但功能类似。它是一个通用循环工具，可以用来遍历一个数组（参见本书2.8节）或者一系列对象。我们传递给$.each（）函数一个数组或者一个对象直接量，以及一个匿名函数。$.each（）函数随后遍历该数组或对象直接量，并且对每一项运行一次该匿名函数。该匿名函数接收两个参数（在这一步的代码中，是i和photo），它们是包含了项的索引和项本身的变量。索引是用来遍历具体项的数字，它和数组的索引一样工作（参见本书2.8.2节）。例如，循环中的第一行的索引为0。第二个参数（在这个例子中是photo）是真正的照片对象，它包含了照片的名称、说明、URL等，正如本书12.3节所介绍的那样。

在Flickr feed的例子中，data.items表示JSON feed中（参见12.3节）的照片对象，因此$.each（）函数将每张照片的这个对象传递给photo变量中的匿名函数。换句话说，这段代码遍历了feed中的每一张照片，然后做些事情。在这个例子中，我们将直接创建一系列的缩略图图像，它们连接到每张照片的Flickr页面。目标是创建一些基本的HTML来显示每张图像并包含一个链接。例如：

＜span class="image"＞

＜a href="http：//www.flickr.com/photos/smithsonian/5988083516/"＞

＜img src="http：//farm7.static.flickr.com/6029/5988083516_bfc9f41286_s.jpg"＞

＜/a＞

＜/span＞

只有两段信息是构建这段HTML所必需的，即照片的Flickr页面的URL以及到照片文件的路径。我们将构建一个长长的字符串，它看上去就像上面的HTML，但是需要具体根据每张照片来替换URL和照片的路径。

7.在$.each（）函数中添加如下粗体所示的代码：

$.each（data.items, function（i, photo）{

var photoHTML=’＜span class="image"＞’；

photoHTML+=’＜a href="’+photo.link+’"＞’；

photoHTML+=’＜img src="’+photo.media.m+’"＞＜/a＞’；

}）；//end each

这段代码首先创建一个变量photoHTML，它存储了一个开始＜span＞标签，后续的每一行代码都给这个变量添加了更多的内容（要回忆+=的含义及其是如何工作的，参见2.5.5节）。这里的关键元素是photo.link和photo.media.m。如果你查看12.2.3节的JSON代码，可以看到每张照片都有各种不同的属性，例如title（照片的名称）和description（照片的简要说明）。Link属性指向Flickr.com上的照片页面，而media对象有一个名为“m”的属性，它包含了到图像文件的中等大小版本的路径。这段代码一起构建了步骤6中所示的HTML。现在，你只需要向页面添加代码。

8.添加如下粗体所示的代码：

$.each（data.items, function（i, photo）{

var photoHTML=’＜span class="image"＞’；

photoHTML+=’＜a href="’+photo.link+’"＞’；

photoHTML+=’＜img src="’+photo.media.m+’"＞＜/a＞’；

$（'#photos'）.append（photoHTML）；

}）；//end each

$（'#p hotos'）部分选择页面上已经存在的一个＜div＞标签，而append（）函数（参见4.7节的介绍）在div的末尾添加了HTML。换句话说，每次经过循环的时候，都有另一段HTML添加到该div。

9.保存该页面并且在Web浏览器中预览。

你应该看到页面载入了20幅照片（如果你没有看到任何内容，仔细检查你的代码，并使用Web浏览器的错误控制台（参见1.6节）来查找任何语法错误）。问题是，照片都具有不同的大小，并且不会在页面上形成一个漂亮的网格。这是因为Flickr feed只是提供了到中等大小的Flickr图像的路径。

Flickr还拥有其所有的照片的一个漂亮的方阵。将这些同样大小的照片一起放在一个页面上，漂亮、有序地展示出来。幸运的是，请求这些缩略图图像很容易。Flickr为其图像使用一个一致的命名惯例：到中等大小的图像的路径类似http：//farm7.static.flickr.com/6029/5988083516_bfc9f41286_m.jpg，而同样图像的缩略图路径是http：//farm7.static.flickr.com/6029/5988083516_bfc9f41286_s.jpg。唯一的区别在于文件名的末尾：_m表示是一个中等大小的图像，_s表示是一个小方块的缩略图（75像素×75像素），_t是一个小图像，长度或高度最大为100像素，_o表示最初的图像（上传到Flickr上的初始文件的大小），_b是较大的图像（高和宽最大为1024像素）。只要调整文件名（例如，用_s替换_m），你可以显示一个不同大小的文件。幸运的是，JavaScript提供了一种方便的方法来快速交换字符串中的字符。

10.在这段代码中，将photo.media.m修改为photo.media.m.replace（'_m'，’_s'）。页面的最终代码应该如下所示：

$（document）.ready（function（）{

var URL="http：//api.flickr.com/services/feeds/photos_public.gne"；

var ID="25053835@N03"；

var jsonFormat="＆format=json＆jsoncallback=?"；

var ajaxURL=URL+"?id="+ID+jsonFormat；

$.getJSON（ajaxURL, function（data）{

$（'h1'）.text（data.title）；

$.each（data.items, function（i, photo）{

var photoHTML=’＜span class="image"＞’；

photoHTML+=’＜a href="’+photo.link+’"＞’；

photoHTML+=’＜img src="’+photo.media.m.replace（'_m'，’_s'）+’"＞＜/

a＞’；

$（'#photos'）.append（photoHTML）；

}）；//end each

}）；//end get JSON

}）；//end ready

JavaScript的replace（）方法（在14.2.6节介绍）操作字符串，并且接收两个参数：要找到的字符串（在这个例子中是’_m'）以及用来替换它的字符串（'_s'）。

11.保存页面并且在Web浏览器中预览。

现在，你应该看到一个来源不超过20张的整齐排列的、方形缩略图的照片（如图12-1所示）。单击一个缩略图来查看Flickr站点上较大一点的图像。本教程的一个有效的版本complete_flickr.html可以在chapter12文件夹下找到。

注意：这个Flickr feed最多只提供20张图像。可以通过任何一个feed获取20张以上的照片。如果你只想要显示来自feed的10张图像，该怎么办呢？查看chapter12文件夹下的complete_flickr_limit_photos.html文件以了解解决方案。