如何在圖庫中實現上一個/下一個按鈕？

我有一個從數據庫中填充的GridView。當我點擊GridView中的圖像時，它會在名爲imgFull的新圖像中打開。該圖像可以更多地解釋：如何在圖庫中實現上一個/下一個按鈕？

this is my image

我想提出一個和上一個按鈕，從數據庫中我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>

有人能幫助我嗎？

來源

2012-12-09 user1637402

你一個/下一個按鈕，將需要單擊事件處理程序：

$('#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來切換適當的圖像的可見性。

來源

2012-12-09 11:33:46

不，我想只加載gridview顯示的頁面，我認爲它可以在jQuery或JavaScript只是 – user1637402

如何在圖庫中實現上一個/下一個按鈕？

回答

相關問題