导航的实现
虽然表格列出了目录中的一些图像，但用户还需要一种查看表格中未出现的图片的方法。要真正实现分页器的导行，则需要一套标准的链接：首页、上一页、下一页和尾页。
清单 3. 分页器导航
| // Append navigation $output = '＜h4＞Showing items ' . $limit_start . '-' . min($limit_start + $limit_step - 1, count($images)) . ' of ' . count($images) . '＜br /＞'; $prev_start = max(0, $limit_start - $limit_step); if ( $limit_start ＞ 0 ) { $output .= get_table_link('＜＜', 0, $limit_step); $output .= ' | ' . get_table_link('Prev', $prev_start, $limit_step); } else { $output .= '＜＜ | Prev'; } // Append next button $next_start = min($limit_start + $limit_step, count($images)); if ( $limit_start + $limit_step ＜ count($images) ) { $output .= ' | ' . get_table_link('Next',$next_start, $limit_step); $output .= ' | ' . get_table_link('＞＞',(count($images) - $limit_step), $limit_step); } else { $output .= ' | Next | ＞＞'; } $output .= '＜/h4＞'; |
最后还要编写 get_image_link() 和 get_table_link() 函数，让用户将缩略图展开成完整的图像（参见清单 4）。注意，脚本 index.php（以及后面要创建的 expand.php）只在这两个函数中调用。这样就很容易改变链接的功能。事实上在下面与 Sajax 进行集成时，只有这两个函数需要修改。
清单 4. get_image_link、get_table_link 实现
| function get_table_link ( $title, $start, $step ) { $link = "index.php?start=$start&step=$step"; return '＜a href="' . $link . '"＞' . $title .'＜/a＞'; } function get_image_link ( $title, $index ) { $link = "expand.php?index=$index"; return '＜a href="' . $link . '"＞' . $title . '＜/a＞'; } |
放大图片
现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是允许用户单击缩略图来查看全图。get_image_link() 函数调用了 expand.php 脚本，我们现在就来编写它。该脚本传递用户希望展开的文件的索引，因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了，只需创建病输出 image 标记即可。
清单 5. get_image 函数
| function get_image ( $index ) { $images = get_image_list ( 'images' ); // Generate navigation $output .= '＜img src="images/' . $images[$index] . '" /＞'; return $output; } |
接下来还要提供与分页器类似的导航机制。“上一张” 导航到编号为 $index-1 的图像，“下一张” 导航到编号为 $index+1 的图像，“返回” 则回到分页器。
清单 6. get_image 导航
| $output .= '＜h4＞Viewing image ' . $index .' of ' . count($images) . '＜br /＞'; if ( $index ＞ 0 ) { $output .= get_image_link('＜＜', 0); $output .= ' | ' . get_image_link('Prev', $index-1); } else { $output .= '＜＜ | Prev'; } $output .= ' | ' . get_table_link('Up', $index, 5); if ( $index ＜ count($images) ) { $output .= ' | ' . get_image_link('Next', $index+1); $output .= ' | ' . get_image_link('＞＞', count($images)); } else { $output .= ' | Next | ＞＞'; } $output .= '＜/h4＞'; |
最后创建一个简单的 HTML 容器，将其命名为 expand.php。
清单 7. get_image 导航
| ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"＞ ＜html xmlns="http://www.w3.org/1999/xhtml"＞ ＜head＞ ＜title＞Creating a simple picture album viewer＜/title＞ ＜style type="text/CSS"＞ body { text-align: center } table.image_table { margin: 0 auto 0 auto; width: 700px; padding:10px; border: 1px solid #ccc; background: #eee; } table.image_table td { padding: 5px } table.image_table a { display: block; } table.image_table img { display: block; width: 120px; padding: 2px; border: 1px solid #ccc; } ＜/style＞ ＜/head＞ ＜body＞ ＜h1＞Creating a simple picture album viewer＜/h1＞ ＜?php $index = isset($_REQUEST['index']) ? $_REQUEST['index'] : 0; echo get_image($index); ?＞ ＜/body＞ ＜/html＞ |
这样我们就完成了相册。用户可以看到所有的图片，而且很容易导航。自然，用户可以来回切换，甚至能通过书签功能返回喜欢的图片。
 图 2. 完成的相册 |
添加 Sajax
现在相册提供了基本的导航功能，目录中的图像添加了索引。下面您将看到添加 Sajax 能够改进编程和用户体验。
这里假设您对 Ajax 有基本的了解，最好还熟悉 Sajax 的基础知识（请参阅 参考资料 中的教程）。