先參閱結果範例

商品記錄資料===>存放在結構化語言的XML檔案
結合資料有效呈現=====>使用Spry架構
點選縮圖呈現大圖及相關細節說明=====>使用LightBox設計技巧

第一階段： XML資料結合Spry架構呈現商品影像

為了有效維護商品資料及呈現設計，將商品記錄資料寫在XML檔案（如下圖）

插入==>Spry==>Spry資料集

第1個步驟：選取資料類型為「XML」，按瀏覽選擇XML的檔案，列元素點選記錄單位。

第2個步驟：當資料欄位內容有HTML標籤時，例如下圖的desc欄位，則將欄位類型設定為html，還可以指定要排序的欄位。

第3個步驟：選擇要顯示的版面模式，例如第3種「插入堆疊容器」，按「設定」鈕決定要顯示的欄位。

CSS面板：調整CSS規則，參考如下
「.StackedContainers」負責整個版面的寬度及置中
「.StackedContainers .RowContainer」負責一筆記錄資料的版面

結果參考如下：

第二階段： 設計點選縮圖顯示大圖的超連結

接下來要設定超連結，當點選縮圖時會呈現出大圖
點選縮圖影像，設定連結到大圖影像，參考下圖程式碼
{image3}是大圖檔名的欄位，留意圖檔存放的路徑及連結的相對關係
為了設計當滑鼠滑入時整個商品記錄呈現背景色彩
可以將<a>連結標籤向前後外圍搬移

第三階段：運用LightBox加強設計呈現大圖的效果

Lightbox2（燈箱效果）是由 Lokesh Dhakar 所製作的程式。
點選上行Lightbox2可以連結到原始網站參閱原始說明
點選這裡可以下載所需要的相關檔案
（相關的檔案如下圖請參考：１個CSS檔案,５個JS檔案, 多個影像圖檔）

接著在</head>的上方插入以下4行程式碼（留意檔案存放的位置及路徑的相對關係）
前3行是載入需要的javascript程式檔
第4行是連結到lightbox.css樣式表檔

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

參考下圖

再接著
必須在<a>連結的標籤中加上２個屬性

rel="lightbox[roadtrip]"，表示要啟動lightbox，
[]表示所有的連結有群組關係，roadtrip是群組名稱，
title="{desc}"，是要顯示的標題內容，使用{desc}欄位的內容當作標題的內容，
會呈現到大圖顯示的下方

參考下圖

結果參考下圖：　點選此可以參閱範例