摘要: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>
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 }
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 }