一. 概述
在網店系統的產品詳細頁面中，展示產品細節涉及多張產品圖片和相關的媒體文件、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的產品圖片櫥窗的實現代碼下載下來參考借鑒。

Amazon的產品圖片櫥窗的設計包含多種方式：

普通型：列出縮略圖和當前的大圖的普通形式。
規格關聯型：每一個獨立的規格（如顏色、尺寸）都關聯該規格的產品圖片，通過點擊規格進行切換。
圖書試讀型：專門針對圖書閱讀，并提供關聯推薦和其它若干功能的.
前面兩種是大多數產品公用的，而第三種則是專門針對圖書類產品。筆者猜測Amazon的產品圖片櫥窗模板是可以指向到產品目錄級別的。其中第一種和第二種是寫在一個模板內，然后通過判斷產品是否支持規格來做不同的顯示，該模板為通過模板，比如叫GlobalGallery.jsp。第三種則是獨立的櫥窗模板，在Books Category中關聯調用，比如叫BooksGallery.jsp。

3.1設計說明
普通型櫥窗截圖

點擊一個普通的無規格的產品的產品大圖即會彈出上面的截圖。

普通型櫥窗的設計相當的簡單，分為上中下三部分，上面是大圖顯示的主體部分，中間是功能欄，有放大、縮小和恢復正常三個。下面是多個圖片的縮略圖。

規格關聯型

點擊一個帶有規格的產品的產品大圖即會彈出。 http://www.amazon.com/KitchenAid-KSM150PSWH-Artisan-5-Quart-Mixer/dp/B00005UP2K/ref=sr_1_3?ie=UTF8&s=kitchen&qid=1276958964&sr=1-3

從上圖的設計上可以看出，這是在普通型的基礎上增加了右側的規格列表框構成的。

點擊任一個規格，左下側的縮略圖列表將會變成該規格相應的圖片，比如選擇黑色，那么將會顯示黑色規格的所有圖片。

這個擴展的設計很棒，建議在網店系統中實現。

圖書試讀型

點擊一個圖書產品的產品圖片彈出的層（注意是層而不是新的頁面）。該類櫥窗比上面兩種都要復雜得多：

左側是該產品概述欄，有加入購物車按鈕，下面是Book sections導航，并提供Search inside this book功能（只有當前的圖書有電子版才能實現吧）。

右側是瀏覽歷史和Also Bought形式的產品推薦。

中間是該圖書的當前頁面（可以從第一頁看到最后一頁），并提供放大縮小功能。

頂部右側還提供了一些小功能，如Feedback、Help、Expanded View（將該層展開，占滿瀏覽器屏幕）和Close。

這個櫥窗頁面的設計較為復雜，是專門針對圖書類商品設計。

對于圖書類產品，顧客在試讀的過程中往往會做出購買決定，而且圖書類產品基本不會涉及產品規格，所以在該頁面整合了Add to Cart按鈕和Also Buy關聯推薦，這點和其它產品有所不同了。

總結
Flash雖然效果很漂亮，但是國內使用Flash做產品櫥窗做得好的暫時沒有發現，我提供的參考例子只是一些樣例，并沒有實際的整合到網店系統中的優秀案例，而且因為它對SEO不友好，加上需要開發人員掌握一門新的技術，所以并不推薦使用。
采用Javascript + Html + CSS可以實現更為復雜的功能和展示方式（炫目的效果并不是首要的，友好的功能才是最重要的），這是實現產品圖片櫥窗模板的最佳選擇。
應該支持規格的個性圖片櫥窗展示，有利于顧客查看指定規格的產品圖片，而不是大雜燴的混在一起。
支持多套櫥窗模板，如Amazon.com這樣，還可以考慮進一步的擴展，比如將Dvd影片類產品的試看功能、Mp3類產品的試聽功能都整合到櫥窗模板中，針對不同的產品目錄、產品類型而作相應調用。

來源：ebizer原創，轉載請注明出處。