Lightbox和Datalist

aspx

01 <td>
02     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     }

 

 

imgHandler.ashx 設定顯示的圖檔依等比例縮放

001 <%@ WebHandler Language="C#" Class="imgHandler" %>
002
003 <%@ WebHandler Language="C#" Class="imgHandler" %>
004
005 using ...System;
006 using System.Data;
007 using System.Configuration;
008 using System.Collections;
009 using System.Web;
010 using System.Web.Security;
011 using System.Web.UI;
012 using System.Web.UI.WebControls;
013 using System.Web.UI.WebControls.WebParts;
014 using System.Web.UI.HtmlControls;
015 using System.IO;
016 using System.Data.SqlClient;
017 using System.Drawing;
018
019 public class imgHandler : IHttpHandler
020 ...{
021
022     public void ProcessRequest(HttpContext context)
023     ...{
024         //指定圖片輸出格式
025         context.Response.ContentType = "image/jpeg";
026
027         讀取資料庫#region 讀取資料庫
028         SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionImageDB"].ToString());
029         SqlCommand cmd = new SqlCommand("USP_selImageDataNo", conn);
030         cmd.Parameters.Add(new SqlParameter("@No", SqlDbType.Int)).Value = context.Request.QueryString["No"].ToString();
031         cmd.CommandType = CommandType.StoredProcedure;
032         DataSet ds = new DataSet();
033
034         try
035         ...{
036             if (conn.State != ConnectionState.Open)
037                 conn.Open();
038
039             SqlDataAdapter da = new SqlDataAdapter(cmd);
040             da.Fill(ds);
041         }
042         catch (Exception ex)
043         ...{
044             throw ex;
045         }
046         finally
047         ...{
048             if (conn.State != ConnectionState.Closed)
049                 conn.Close();
050         }
051         #endregion
052
053         //宣告一個 Byte 做資料處理用途
054         byte[] bytes = null;
055
056         try
057         ...{
058             if (ds.Tables[0].Rows.Count > 0)
059             ...{
060
061                 bytes = (byte[])ds.Tables[0].Rows[0][1];
062
063                 設定顯示的圖檔依等比例縮放#region 設定顯示的圖檔依等比例縮放
064
065                 //將byte[] 資料，轉成Stream，以便於Bitmap使用
066                 MemoryStream ms = new MemoryStream(bytes);
067
068                 //宣告Bitmap ，讀取資料流
069                 Bitmap b = new Bitmap(ms);
070
071                 //設定浮點值，依寬度為基準
072                 float intFixWidth = 100F;
073
074                 //取得欲縮放的比例
075                 float f = intFixWidth / b.Width;
076
077                 //取得縮放猦的高度
078                 float intFixHeight = f * b.Height;
079
080                 //宣告新的Bitmap，將舊的Bitmap重新設定高、寬
081                 Bitmap imgOutput = new Bitmap(b, Convert.ToInt32(intFixWidth), Convert.ToInt32(intFixHeight));
082
083                 //新的Bitmap，儲存影像，設定圖檔格式
084                 imgOutput.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
085
086                 //釋放圖檔
087                 b.Dispose();
088                 imgOutput.Dispose();
089
090                 #endregion
091             }
092
093         }
094         catch (Exception ex)
095         ...{
096             throw ex;
097         }
098
099     }
100
101     public bool IsReusable
102     ...{
103         get
104         ...{
105             return false;
106         }
107     }
108
109 }
110
111

 

imgHandlerO.ashx 設定顯示的圖檔原始大小

01 <%@ WebHandler Language="C#" Class="imgHandler" %>
02
03 <%@ WebHandler Language="C#" Class="imgHandler" %>
04
05 using ...System;
06 using System.Data;
07 using System.Configuration;
08 using System.Collections;
09 using System.Web;
10 using System.Web.Security;
11 using System.Web.UI;
12 using System.Web.UI.WebControls;
13 using System.Web.UI.WebControls.WebParts;
14 using System.Web.UI.HtmlControls;
15 using System.IO;
16 using System.Data.SqlClient;
17 using System.Drawing;
18
19 public class imgHandler : IHttpHandler
20 ...{
21
22     public void ProcessRequest(HttpContext context)
23     ...{
24         //指定圖片輸出格式
25         context.Response.ContentType = "image/jpeg";
26
27         讀取資料庫#region 讀取資料庫
28         SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionImageDB"].ToString());
29         SqlCommand cmd = new SqlCommand("USP_selImageDataNo", conn);
30         cmd.Parameters.Add(new SqlParameter("@No", SqlDbType.Int)).Value = context.Request.QueryString["No"].ToString();
31         cmd.CommandType = CommandType.StoredProcedure;
32         DataSet ds = new DataSet();
33
34         try
35         ...{
36             if (conn.State != ConnectionState.Open)
37                 conn.Open();
38
39             SqlDataAdapter da = new SqlDataAdapter(cmd);
40             da.Fill(ds);
41         }
42         catch (Exception ex)
43         ...{
44             throw ex;
45         }
46         finally
47         ...{
48             if (conn.State != ConnectionState.Closed)
49                 conn.Close();
50         }
51         #endregion
52
53         //宣告一個 Byte 做資料處理用途
54         byte[] bytes = null;
55
56         try
57         ...{
58             if (ds.Tables[0].Rows.Count > 0)
59             ...{
60
61                 bytes = (byte[])ds.Tables[0].Rows[0][1];
62
63                 設定顯示的圖檔原始大小#region 設定顯示的圖檔原始大小
64
65                 //將byte[] 資料，轉成Stream，以便於Bitmap使用
66                 MemoryStream ms = new MemoryStream(bytes);
67
68                 //宣告新的Bitmap，將舊的Bitmap重新設定高、寬
69                 Bitmap imgOutput = new Bitmap(ms);
70
71                 //新的Bitmap，儲存影像，設定圖檔格式
72                 imgOutput.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
73
74                 //釋放圖檔
75                 imgOutput.Dispose();
76
77                 #endregion
78             }
79
80
81         }
82         catch (Exception ex)
83         ...{
84             throw ex;
85         }
86
87     }
88
89     public bool IsReusable
90     ...{
91         get
92         ...{
93             return false;
94         }
95     }
96
97 }
98
99

本文轉自
http://www.dotblogs.com.tw/jero/archive/2008/03/21/1988.aspx