ebizer原创，转载请注明出处。作者：ebizer团队 Winston
一. 概述
在网店系统的产品详细页面中，展示产品细节涉及多张产品图片和相关的媒体文件、pdf、doc等，可供顾客浏览产品细节、进行试读、试听、试看等，从各个角度来介绍产品，这些内容越丰富越有利顾客了解产品， 也越有利顾客做出购买决定。
但产品详细页面本身就有很多信息，包括产品名称、价格、描述、规格参数、评论等，如果还加上这么多图片和媒体文件，那么该页面将会显得非常臃肿，导致排版困难， 读取速度变慢等问题。
现在通用的解决方式是设计一个专门的产品图片橱窗页面（Product Photo Gallery）。
该页面的入口一般是直接点击产品详细页面的产品大图然后弹出层或者弹出新页面。该页面侧边列出当前产品所有的产品图片的缩略图，点击缩略图时，中间区域显示对应的大图，有些还提供放大功能，供顾客查看关注的细节。
产品图片橱窗的实现方式目前常见的是两种：
- Flash图片橱窗
- Javascript图片橱窗
下面将就这两种方式做详细说明.
二. Flash 图片橱窗
典型的例子是淘宝，实现方式是设计一个Flash程序，读取指定目录下的指定文件（若干个），但是淘宝做得并不好，感觉会导致图片失真，所以绝大部分店主都是在详细页面中插入图片的方式显示给顾客。
Flash方式的好处是不容易被复制或者做盗链，有利于保护图片，而且如果做得好，效果也很漂亮，淘宝在这点上做得太过粗糙了，往往会掩盖了Flash橱窗的优点。
这里有很多优秀的Flash Galley，可做参考：
http://flash-gallery.com/
下面是该网站中两个例子的截图：
但Flash橱窗比较不好的一点是不利于SEO，而且如果要实现更多的和服务器端的互动操作，需要对Flash的编程语言ActionScript较为熟悉才行。这对于习惯于javascript的开发人员就得学习一种新的技术了。
三. Javascript图片橱窗
Javascript实现产品图片橱窗是常见的处理方式，有利于SEO优化，而且通过JS+Html+CSS可以实现更多复杂的效果和互动功能。至于防止盗链，笔者觉得通过在图片上做水印才是彻底的解决方式。
Javascript Galley的最佳参考例子是Amazon了，读者甚至可以将Amazon的产品图片橱窗的实现代码下载下来参考借鉴。
文章TAG：摄影设计
