幾天前，Insus.NET寫一篇顯示目錄圖片的博文：http://www.cnblogs.com/insus/archive/2013/05/16/3081055.html 只是讓你了解到GridView控件顯示圖片，用戶控件的使用以及開發過程常提及的接口應用。當顯示原圖時，是使用了Ajax的技術，似有所局限性。
如果你的站點中，有需要顯示很多圖片，或是顯示圖片為主的網站的話，使用GridVeiw控件來顯示，就顯得它不足之處。此次，Insus.NET使用另外一個控件DataList來顯示，並一步一步實現最終的效果。
做程序開發，是不能一步到位，均是先實現最基本以及預期的效果，再進行重構，再優化，再補充功能。
在站點中，創建一個目錄ImageLib，用來存儲圖片。有關圖片上傳，或是可供用戶管理部分的功能，此篇就略去了。Insus.NET懶，還是使用上一篇使用的圖片吧，不過再下載幾張，還是太陽系相關的圖片。或許受到小兒子的影響，近段時間，他在學習之余，了解很多太空知識。
在站點上，創建一個aspx網頁，如Default.aspx,並在網頁中從ToolBox拉入一個DataList控件。如下圖：
上圖中，#0位置代碼，是一個圖片控件asp:Image,它將是用來顯示圖片。設定一個屬性BorderStyle=0 ，要也就是說要去圖片邊框線。
#1位置代碼，也是一個鏈接控件，是用來讓用戶點一點圖片，打開另一個窗口，展示原圖。
#2事件，由於圖片是從站點的目錄獲取，一個目錄中有很多圖片，在#1的圖片控件，就需要在此事件中綁定圖片的圖片路徑或是數據流均可。
好，我們要去.aspx.cs為這個DataList控件綁定數據了。
在做之前，有一個問題需要想到的，就是站點的目錄中，有些文件也許不是真正圖片文件，當目錄有開放給用戶上傳時，用戶有可以上傳的不是圖片。因此，需要寫一個函數來檢查文件是否為圖片文件。此方法已經在Insus.NET博客中了：http://www.cnblogs.com/insus/archive/2012/03/08/2385054.html 不過當時只是提供VB.NET版本。考慮到一些網友專攻C#的，還是於此帖出C#版本的代碼：
在.cs中，寫一個方法，
private void Data_Binding(){}
是用來綁定數之用的，我們不可能所綁定的數據代碼均寫在Page_Load事件中，在重構的角度來說，本就應抽取出來，放在一個單獨的方法內。這樣當其它方法執行完畢，需要重新綁定數據時，只再執行此方法即可。
第11代碼，是寫一個頁面級的變量，就是指定圖片的目錄。當然在你的環境中，這個也許不是這樣寫了，而是你從其它頁面傳過來的目錄路徑，或是從數據庫取出來的路徑，或是用戶自己所屬的路徑目錄，等等。
這個變量，在下面數據綁定時，就有兩處位置用取到。21和26行代碼yellow高亮的部位。
第26行代碼的的粉紅高亮部位函數，就是剛才寫的判斷的文件是否為圖片的函數。
然后是把是圖片的文件放入泛型的List<FileInfo>集合中。
最后是32和33行代碼，綁定給DataList控件。
在Page_Load事件方法內：
完成到此，相信程序是可以運行的了，只不過，圖片是不會顯示出來，因為
OnItemDataBound="DataListGalleryList_ItemDataBound"
事件還沒有寫，圖片是ImageUrl是在此事件中實現的。
那就寫吧，等等......， 現在還是不能寫。因為還要准備圖片處理縮略圖與顯示原圖片的程序。
照抄就是了，博文第一個鏈接http://www.cnblogs.com/insus/archive/2013/05/16/3081055.html就有寫了。
不是的，Insus.NET不想使用那個種方法，因為圖片沒有按比例縮放，有些縮略圖已經變形了。要想控制好圖片的縮略圖，有幾個方面要想到的，就是給圖片縮略的比例因子，或是指定寬度還是高度，有了這些條件，就可以拿圖片原有尺寸來作比較。具體的程序Insus.NET也忘記了，因為在Insus.NET有專案中有用到的縮略程序已經封裝為一個DLL類庫了。但在這里，Insus.NET不想網友去用什么封裝好的組件，還是有源程序參考好。去Insus.NET博客中找吧，這些勞作應該的。
壹. http://www.cnblogs.com/insus/articles/1909037.html
貳. http://www.cnblogs.com/insus/archive/2011/05/28/2060601.html
叄. http://www.cnblogs.com/insus/archive/2011/04/02/2003740.html
此篇博文是顯示目錄中的圖片，因此Insus.NET選擇壹方法，在顯示時，再做縮略。當然你在程序開發，要考慮好，用戶上傳圖片時，需要做好圖片一上傳，並同時產生一幅縮略圖。這樣做法效率會再好些，不管是顯示縮略圖還是原圖，均是顯示目錄中的圖片，而不需要處理了。
OK,現在我們可以完成DataList控件的DataListGalleryList_ItemDataBound()事件了：
#0 判斷數據行是否為AlternatingItem和Item，如果不是直接略過下面代碼。
#1 首先判斷是Hyperlink1和Image1控件是否為空，如果不為空，把兩個控件找出來。將為它們顯示縮略圖和原圖的鏈接。
#2 為Image1控件綁定ImageUrl，它的導向頁面是Thumbnail.aspx，帶一個參數為thum。 還有一點要注意的是，HttpUtility.UrlEncode是為了解決路徑或是文件名中文或是其它字符集的問題。
#3 為Hyerlink1綁定navigateUrl。
預覽一下：
呵呵，基本上算完成了，只是效果並不是最好的。去這個網址了解了解：http://lokeshdhakar.com/projects/lightbox2/ 把它下載下來，並解壓它。然后把下面選中的文件拷貝至站點中，各自的文件目錄名保持原來的
把js和css引用至.aspx網頁中。
DataList控件內ItemTemplate代碼：
改為，注意一下ref屬性，寫法不一樣，所得出的結果也不一樣。不帶“[?] ”，用戶點擊鏈接是只是單張圖片顯示，反之，是可以連續播放，內參數字符只是為了在頁面中讓其唯一而已。
前端頁面.aspx有修改了，自然后端.aspx.cs也應作相應修改，下圖中高亮部分，就是增加與變化的代碼：
迫不及待，看看修改之后的效果，動畫在制作有所壓縮，效果還是有點失望，如果你想看到真正效果，還是自己動手吧。
說實在的，有幾個.ashx代碼，沒有在上面帖出來，如果你想需要整篇演示代碼，可以從下面地址下載。如果你想直接運行的話，需要在.NET 4.0環境之下：
http://download.cnblogs.com/insus/ASPDOTNET/DataList_lightbox2_demo.rar
后記: 
上面所涉及到的 Lightbox 相關代碼，雖然是Open-Source, 版權均屬原公司或作者所擁有。