在asp.net ListView中使用Galleria jQuery插件
我正在尝试与asp.net ListView一起使用,该ListView在上传图像后从数据库获取图像源。以下是我的列表视图:在asp.net ListView中使用Galleria jQuery插件,jquery,asp.net,image,listview,Jquery,Asp.net,Image,Listview,我正在尝试与asp.net ListView一起使用,该ListView在上传图像后从数据库获取图像源。以下是我的列表视图: <div id="photoAlbumDiv" class="photoAlbumDiv"> <asp:ListView ID="ListView1" runat="server" DataKeyNames="id" > <AlternatingItemTemplate>
<div id="photoAlbumDiv" class="photoAlbumDiv">
<asp:ListView ID="ListView1" runat="server" DataKeyNames="id" >
<AlternatingItemTemplate>
<td runat="server" style="">
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">
</td>
</EditItemTemplate>
<EmptyDataTemplate>
<table style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<td runat="server" style="">
</td>
</InsertItemTemplate>
<ItemTemplate>
<td runat="server" style="">
<img id="photoAlbumPhotos" src='<%# Eval("img") %>' alt="Image Not Found" class="photoAlbumPhotos" />
</td>
</ItemTemplate>
<LayoutTemplate>
<table runat="server" border="0" style="">
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</table>
<div style="">
</div>
</LayoutTemplate>
<SelectedItemTemplate>
<td runat="server" style="">
id:
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
<br />
img:
<asp:Label ID="imgLabel" runat="server" Text='<%# Eval("img") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
</div>
下面是我的jquery:
<script type="text/javascript">
Galleria.loadTheme('Scripts/themes/classic/galleria.classic.min.js');
$("#photoAlbumDiv").galleria({
height: 1000,
width: 1000
});
</script>
能做到吗,谢谢你把事情搞砸了,让事情变得比需要的更困难。Galleria插件希望HTML按如下方式组织:
<div>
<img />
<img />
<img />
...
<img />
</div>
就这样。你应该在浏览器中运行一个简单的Galleria gallery画廊。你处理事情的方式不对,使事情变得更加困难。Galleria插件希望HTML按如下方式组织:
<div>
<img />
<img />
<img />
...
<img />
</div>
就这样。您应该在浏览器中运行一个简单的Galleria gallery。但使用listview的全部目的是从数据库中检索图像,如果我正确理解了你的代码,我必须在代码中指定每个图像。我硬编码了图像URL,因为这样你可以很容易地在自己的机器上运行示例代码,看看这个解决方案对你有多好。您可以使用存储在数据库中的数据轻松地更改C代码以绑定ListView。我会更新这个问题,让你明白我的意思。@Wahtever:我已经稍微更新了答案,以表明你可以使用数据库中的数据绑定ListView。如果您正在使用SqlDataSource或ObjectDataSource绑定ListView,那么此代码仍将按原样工作,但您不需要在后面编写代码。更新您的问题,让我知道您是如何绑定ListView的。但是使用ListView的全部目的是从数据库检索图像,如果我正确理解了你的代码,我必须在代码中指定每个图像。我硬编码了图像URL,因为这样你可以很容易地在自己的机器上运行示例代码,看看这个解决方案对你有多好。您可以使用存储在数据库中的数据轻松地更改C代码以绑定ListView。我会更新这个问题,让你明白我的意思。@Wahtever:我已经稍微更新了答案,以表明你可以使用数据库中的数据绑定ListView。如果您正在使用SqlDataSource或ObjectDataSource绑定ListView,那么此代码仍将按原样工作,但您不需要在后面编写代码。更新您的问题,让我知道您是如何绑定ListView的。Alison:如何才能获得每个图像显示的描述?。Thanks@shazia-你应该在这里找到答案艾莉森:你如何才能得到每个图像的描述?。Thanks@shazia-你应该在这里找到答案
<asp:ListView runat="server" ID="lvw">
<LayoutTemplate>
<div id="gallery">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
</LayoutTemplate>
<ItemTemplate>
<img id="photoAlbumPhotos" src='<%# Eval("img") %>' alt="Image Not Found" class="photoAlbumPhotos" />
</ItemTemplate>
</asp:ListView>
protected void Page_Load(object sender, EventArgs e)
{
lvw.DataSource = //Build datasource from database;
lvw.DataBind();
}