在asp.net ListView中使用Galleria jQuery插件

在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>

我正在尝试与asp.net ListView一起使用,该ListView在上传图像后从数据库获取图像源。以下是我的列表视图:

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