顯示使用JavaScript或jQuery的從數據列表

Question

我使用uplodify上傳上傳圖像和DataList控件綁定它，我能夠上傳和DIND圖像完整的圖像，但現在我想顯示在一個大的預覽圖像。

的情況是

默認第一圖像應顯示在大尺寸，後當上下一行的用戶點擊，然後下一行的形象應該在大尺寸顯示，直到用戶不點擊其他一些列。

如何使用的JavaScript或jQuery的幫助下做到這一點。

請幫助我很快...

我DataList控件是

<asp:DataList ID="DataList1" runat="server" RepeatDirection="Vertical" onitemcommand="DataList1_ItemCommand" onitemdatabound="DataList1_ItemDataBound" CaptionAlign="Right" CellSpacing="6"> 
<ItemTemplate> 
<asp:ImageButton ID="Image" runat="server" ImageUrl='<%#"~/Controls/ShowImage.ashx?FileName=" +DataBinder.Eval(Container.DataItem, "FilePath") %>' 
OnCommand="Insert_Command" CommandArgument='<%# Eval("Id").ToString() +";"+Eval("FilePath")%>' /> 
<asp:Label ID="lblimagenumber" runat ="server" Text='<%# DataBinder.Eval(Container.DataItem, "FileName") %>' ></asp:Label> 
</ItemTemplate> 
</asp:DataList> 

Answer 1

我已經採取了DIV

<div id="loadarea" class="imageViewArea"> 
     <asp:Image ID="imgthumb" runat="server" /> 
    </div> 

而且在Insert命令

 Image imgThumb = (Image)this.FindControl("imgthumb"); 
     imgThumb.ImageUrl = "~/Controls/ShowImage.ashx?FileName=" + ImgName; 

我能夠顯示圖像

Answer 2

你可以有以下或包含所有上傳的圖像數據列表的頂部contianer。使用JS是這樣的

標記

<div id="imagePreview"></div> 

JS

$("dataListSelector").find("img").click(function(){ 

    $("#imagePeview").html("<img src='"this.src"' />"); 
}); 

的CSS - 要顯示的圖像預覽中大尺寸

#imagePeview img 
{ 
    height:400px;//You can either set height or width to an image, it will scale accordingly 
}