DataList與Lightbox結合秀圖.(上)

摘要:DataList與Lightbox結合秀圖.(上)

將圖檔存至資料庫後,由DataList讀取之!

透過Lightbox來顯示圖檔!

並將圖檔等比例縮放!


 


aspx

01 <td>
02     <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" DataKeyField="No" CellPadding="0" CellSpacing="10"
03      OnItemDataBound="DataList1_ItemDataBound" RepeatColumns="3" Width="80%" OnItemCommand="DataList1_ItemCommand">
04         <ItemTemplate>
05             <table class="ImageTable">
06                 <tr>
07                     <td colspan="2" class="ImageTd">
08                         <asp:HyperLink ID="hlImage" runat="server" rel="lightbox[mando]" title='<%# Eval("TagName") %>' ImageUrl='<%# "imgHandler.ashx?No="+Eval("No") %>' NavigateUrl='<%# "imgHandlerO.ashx?No="+Eval("No") %>'></asp:HyperLink>
09                         <div id="divDesc" runat="server"><%# Eval("Description")%></div>
10                     </td>
11                 </tr>
12                 <tr>
13                     <td class="ImageTd">
14                         <asp:HyperLink ID="hlModify" runat="server" Text="修 改" NavigateUrl='<%# "~/gallery/albumModify.aspx?No=" + Eval("No") %>'></asp:HyperLink>
15                     </td>
16                     <td class="ImageTd">
17                         <asp:LinkButton id="lbtnDelete" runat="server" Text="刪 除" CommandName="Delete" CommandArgument='<%# Eval("No") %>' OnClientClick="return Check();"></asp:LinkButton>
18                     </td>
19                 </tr>
20             </table>
21         </ItemTemplate>
22     </asp:DataList>
23     <script type="text/javascript">
24         window.addEvent('domready',function(){
25             Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
26         });
27     </script>
28 </td>

圖檔顯示的部分在第8行!透過imgHandler.ashx來顯示

Lightbox的文字述序在第9行,但,還有針對Lighbox的設定要透過程式端來處理!(Lightbox相關請自已參閱)

 

aspx.cs

1     protected void DataList1_ItemDataBound(object sender, DataListItemEventArgs e)
2     {
3         if (e.Item.ItemType == ListItemType.Footer || e.Item.ItemType == ListItemType.Header || e.Item.ItemType == ListItemType.Pager) return;
4
5         ((System.Web.UI.HtmlControls.HtmlGenericControl)(e.Item.FindControl("divDesc"))).Attributes.Add("class", "lightboxDesc " + ((HyperLink)e.Item.FindControl("hlImage")).ClientID.ToString());
6     }