我有一个从数据库填充的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>
有人会帮助我吗?
答案 0 :(得分: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);
}
});
这只是一个解决方案。
根据图库的大小,您还可以预先加载所有图片,并使用jquery / javascript切换相应图片的可见性。