0

データベースから GridView を作成しています。GridView で画像をクリックすると、新しい画像が開きますimgFull。この画像で詳しく説明できます。

これが私のイメージです

データベースから次の画像をdivに取得するために、次と前のボタンを配置したいと思います。jQueryやJavaScriptで開発したい。これは私のコードのサンプルです:

<div>
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
  Font-Names="Arial">
 <Columns>
  <asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="FileName" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Preview Image">
    <ItemTemplate>
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# "images/"     +Eval("FilePath")  %>' Width="100px" Height="100px" Style="cursor: pointer" OnClientClick = "return LoadDiv(this.src);"/>

  </ItemTemplate>
</asp:TemplateField>
 </Columns>
</asp:GridView>
    </div>

  <div id="divBackground" class="modal">

 </div>
 <div id="divImage" class = "info"> 
           <input id="btnNext" type="button" value="next" />
                <input id="Button1" type="button" value="left" />
           <input id="Button2" type="button" value="right" />
            <img id="imgLoader" alt=""
             src="~/images/loader.gif" />

          <img id="imgFull" runat="server" alt="" src=""  style="height: 500px;width: 590px"/>

 <input id="btnClose" type="button" value="close" onclick="HideDiv()"/>
 </div>

誰かが私を助けてくれますか？

4

1 に答える 1

0

前/次のボタンには、クリック イベント ハンドラーが必要です。

$('#yourNextButtonId').bind('click', function(){
    sendAjaxRequestFunction();
}

表示する画像のパスを返すサーバー側スクリプト (php など) への ajax 呼び出しを行います。 http://api.jquery.com/jQuery.ajax/

$.ajax({
    url: "./scripts/chatLogout.php",
    type: "post",
    success: function(response, textStatus, jqXHR)
    {
        $('#yourImageId').attr('src', response);    
    }   
});

これは 1 つの解決策にすぎません。

ギャラリーのサイズによっては、すべての画像を事前にロードし、jquery/javascript を使用して適切な画像の表示を切り替えることもできます。

于 2012-12-09T11:33:46.927 に答える