将 Galleria jQuery 插件与 asp.net ListView 一起使用

Question

我正在尝试将 Galleria 与 asp.net 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>

可以吗，谢谢

Answer 1

您以错误的方式处理事情并使其变得比需要的更困难。 Galleria 插件期望 HTML 组织如下：

<div>
    <img />
    <img />
    <img />
    ...
    <img />
</div>

如您所见，div 中只有图像。您有一个不起作用的表结构。使用以下代码运行一个快速示例，您会发现它是多么简单。

Javascript

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="galleria/galleria-1.2.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
        $("#gallery").galleria({
            width: 200,
            height: 300
        });
    });        
</script>

ASPX

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

C#

protected void Page_Load(object sender, EventArgs e)
{
    lvw.DataSource = //Build datasource from database;
    lvw.DataBind();
}

就是这样。您应该在浏览器中运行一个简单的 Galleria 画廊。