データリストのjavascriptまたはjqueryを使用して完全な画像を表示

Question

アップロードを使用してデータをアップロードしてデータリストにバインドすると、 。

シナリオがある

デフォルトで最初の画像は、大きなサイズで表示されるはずの次の行のユーザクリックがその後、次の行の画像は大きいサイズで表示しなければならない場合、その後ユーザまで他のいくつかの行をクリックしません。

javascriptまたはjqueryの助けを借りて行う方法。

すぐに私を助けてください...

私のデータリストは、あなたが以下または全てのアップロード画像が含まれているデータリストの上にcontianerを持つことができ

<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

私はこのライン$（ "＃のimagePeview"）であるものを画像

Answer 2

です。この

マークアップ

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

JS

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

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

のCssのようなJSのものを使用してください - 大きなサイズで画像のプレビューを表示するには

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