分类:
2008-04-14 15:54:16
扩展相册
使用 Sajax 把我们的相册变成的 Web 应用程序如此轻而易举,我们要再花点时间添加一些功能,进一步说明 Sajax 如何使从服务器检索数据变得完全透明。我们将为相册添加元数据功能,这样用户就能为他们的图片添加说明。
元数据
没有上下文说明的相册是不完整的,比如照片的来源、作者等。为此我们要将图像集中起来创建一个简单的 XML 文件。根节点是 gallery,它包含任意多个 photo 节点。每个 photo 节点都通过其 file 属性来编号。在 photo 节点中可以使用任意多个标记来描述照片,但本例中只使用了 date、locale 和 comment。
清单 12. 包含元数据的 XML 文件
<?xml version="1.0"?> <gallery> <photo file="image01.jpg"> <date>August 6, 2006</date> <locale>Los Angeles, CA</locale> <comment>Here's a photo of my favorite celebrity</comment> </photo> <photo file="image02.jpg"> <date>August 7, 2006</date> <locale>San Francisco, CA</locale> <comment>In SF, we got to ride the street cars</comment> </photo> <photo file="image03.jpg"> <date>August 8, 2006</date> <locale>Portland, OR</locale> <comment>Time to end our road trip!</comment> </photo> </gallery> |
function get_meta_data ( $file ) { // Using getimagesize, the server calculates the dimensions list($width, $height) = @getimagesize("images/$file"); $output = "<p>Width: {$width}px, Height: {$height}px</p>"; // Use SimpleXML package in PHP_v5: // $xml = simplexml_load_file("gallery.xml"); foreach ( $xml as $photo ) { if ($photo['id'] == $file) { $output .= !empty($photo->date) ? "<p>Date taken:{$photo->date}</p>" : ''; $output .= !empty($photo->locale) ? "<p>Location:{$photo->locale}>/p>" : ''; $output .= !empty($photo->comment) ? "<p>Comment:{$photo->comment}</p>" : ''; } } return $output; |
function get_image ( $index ) { $images = get_image_list ( 'images' ); // ... $output .= '<img src="images/' . $images[$index] . '" />'; $output .= '<div id="meta_data">' . get_meta_data( $images[$index] ) . '</div>'; return $output; } |