如何在图片库中实现上一个/下一个按钮？

Question

我有一个从数据库填充的 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>

有人会帮助我吗？

Answer 1

您的上一个/下一个按钮将需要点击事件处理程序：

$('#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);    
    }   
});

这只是一种解决方案。

根据图库的大小，您还可以预先加载所有图片，并使用 jquery/javascript 切换相应图片的可见性。