@omegalove:
1. You will still need a similar JavaScript as shown in my post to call your Handler.ashx to load the full size image.
2. Instead of using hyper links in your DataList's ItemTemplate, you should use Image control. Hyper link will redirect user to a new page, instead of displaying the full size image on the same page.
Here is my example:
Default.aspx is the page to load all thumbnails in DataList, and I use DataList's ItemDataBound event handler to add a "onclick" event for each thumbnail, this "onclick" event fires a JavaScript function called "dispalyFullImage(name)", the parameter in my example is the file name, you can change it to your image id.
Then in the JavaScript function, I first gets the full size Image control, then change its image source to "DisplayPhoto.aspx?name=MyFileName".
DisplayPhoto.aspx serves the same purpose as your Handler.ashx: load the full size image into Response stream.
Once you understand the idea of the design, you should be able to apply it to your app.
Let me know if you have any questions.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
|
'Default.aspx (Display Thumbnails)
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="LearningProject_VB._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascriptD">
function displayFullImage(name)
{
var img = document.getElementById('<%=imgOriginalImage.ClientID %>')
img.style.display="block";
img.style.width="800px"; //change to your image size
img.style.height="600px"; //change to your image size
img.src = "DisplayPhoto.aspx?name=" + name; // Change to Handler.ashx with parameters in your case
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center;">
<asp:Image ID="imgOriginalImage" runat="server" style="display:none;"/>
<br />
<asp:DataList ID="dlThumbnails" runat="server" DataKeyField="Name" DataMember="Name"
RepeatColumns="3" Width="100%">
<ItemTemplate>
<asp:Image ID="imgThumbnail" runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
'Default.aspx.vb
Imports System.IO
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.LoadThumbnails()
End Sub
Protected Sub LoadThumbnails()
Dim imgDir As DirectoryInfo = New DirectoryInfo(Server.MapPath("~/Photos/Thumbnails"))
Me.dlThumbnails.DataSource = imgDir.GetFiles()
Me.dlThumbnails.DataBind()
End Sub
Private Sub dlThumbnails_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlThumbnails.ItemDataBound
If (e.Item.ItemType = ListItemType.AlternatingItem _
Or e.Item.ItemType = ListItemType.Item) Then
Dim fileName As String = Me.dlThumbnails.DataKeys(e.Item.ItemIndex).ToString()
Dim img As System.Web.UI.WebControls.Image = _
CType(e.Item.FindControl("imgThumbnail"), System.Web.UI.WebControls.Image)
img.ImageUrl = "~/Photos/Thumbnails/" & fileName
img.Attributes.Add("onclick", "displayFullImage('" & fileName & "')")
End If
End Sub
End Class
|
