Question : Need to show image above datalist if user selects. the image.

I would like to show image above datalist instead of opening it in another window.

<table width="700px" cellspacing="2" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="middle" align="center" width="10">
==============> the image would appear hear.
 
</td>
<td align="left">
<asp:DataList ID="DLThumbnails" runat="server" DataKeyField="img_id" RepeatDirection="Horizontal"
CellPadding="1" HorizontalAlign="Center" RepeatColumns="5" Item-BorderWidth="1"
Item-BorderColor="#c0c0c0" BackColor="#EBEBEB" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" EnableViewState="false" GridLines="Horizontal" ShowFooter="False"
ShowHeader="False">
<ItemTemplate>
<br />
<table border="0" cellspacing="0">
<tr>
<td valign="top">
<div class="itemTemplate">
<div class="details">
<a href="Handler.ashx?img_id=<%# Eval("img_id") %>&imagesize=F&imagetype=<%# Eval("img_type") %>"
target="_blank">
<img alt="<%# Eval("img_caption") %>" src="Handler.ashx?img_id=<%# Eval("img_id") %>&imagesize=T&imagetype=<%# Eval("img_type") %>"
id="view_image" width="118" height="148" style="cursor: hand" class="photoover" />
</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</ItemTemplate>
<ItemStyle Width="20%" BackColor="#E7E7FF" ForeColor="#4A3C8C" BorderColor="silver"
BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center" VerticalAlign="Bottom" />
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
</asp:DataList>
</td>
<td valign="middle" align="center" width="10">
 
</td>
</tr>
<tr>
<td>
 
</td>
<td align="center">
<asp:Label ID="lblCurrentPage" runat="server" Font-Names="Trebuchet MS" Font-Size="12px"></asp:Label>
</td>
<td>
 
</td>
</tr>
</tbody>
</table>

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:



<asp:DataList ID="DLThumbnails" runat="server" DataKeyField="img_id" RepeatDirection="Horizontal"
                                    CellPadding="1" HorizontalAlign="Center" RepeatColumns="5" Item-BorderWidth="1"
                                    Item-BorderColor="#c0c0c0" BackColor="#EBEBEB" BorderColor="#E7E7FF" BorderStyle="None"
                                    BorderWidth="1px" EnableViewState="false" GridLines="Horizontal" ShowFooter="False"
                                    ShowHeader="False">
                                    <ItemTemplate>
                                        <br />
                                        <table border="0" cellspacing="0">
                                            <tr>
                                                <td valign="top">
                                                    <div class="itemTemplate">
                                                        <div class="details">
                                                            <a href="Handler.ashx?img_id=<%# Eval("img_id") %>&imagesize=F&imagetype=<%# Eval("img_type") %>"
                                                                target="_blank">
                                                                <img alt="<%# Eval("img_caption") %>" src="Handler.ashx?img_id=<%# Eval("img_id") %>&imagesize=T&imagetype=<%# Eval("img_type") %>"
                                                                    id="view_image" width="118" height="148" style="cursor: hand" class="photoover" />
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                        <br />
                                    </ItemTemplate>
                                    <ItemStyle Width="20%" BackColor="#E7E7FF" ForeColor="#4A3C8C" BorderColor="silver"
                                        BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center" VerticalAlign="Bottom" />
                                    <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                                    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                                </asp:DataList>

Attachments:

imagedisplay.png (84 KB) (File Type Details)

image.

Answer : Need to show image above datalist if user selects. the image.

@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