Yolyar Blog※يوليار بلوگ ※道友博客

放大图片
  
  　　现在有了一个可用的分页器为用户提供一些缩略图。相册的第二项功能是允许用户单击缩略图来查看全图。get_image_link() 函数调用了 expand.PHP 脚本，我们现在就来编写它。该脚本传递用户希望展开的文件的索引，因此必须在此列出目录并获得适当的文件名。随后的操作就很简单了，只需创建病输出 image 标记即可。
  
  　　清单 5. get_image 函数
  
  function get_image ( $index ) {
  　$images = get_image_list ( 'images' );
  
  　// Generate navigation
  
  　$output .= '＜img src=""https://web.archive.org/web/20140712054347/http://www.blue1000.com/bkhtml/c16/" title="ASP教程">ASPcool.com/lanmu/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＞
  
  　　这样我们就完成了相册。用户可以看到所有的图片，而且很容易导航。自然，用户可以来回切换，甚至能通过书签功能返回喜欢的图片。