阅读内容 

结合AJAX进行PHP开发之入门3

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

推荐 】 【 打印
相关新闻      
本文评论       全部评论
  好   (秋天 ,2008-08-25 )
发表评论
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款


点评: 字数
姓名:
Advertisement
内容查询


Advertisement