使用带有 asp.net ListView 的 Galleria jQuery 插件

Question

I am trying to use Galleria with an asp.net ListView that gets the image sources from the database after those images are uploaded. The following is my 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>

and here is my jquery:

                        <script type="text/javascript">
                        Galleria.loadTheme('Scripts/themes/classic/galleria.classic.min.js');
                        $("#photoAlbumDiv").galleria({
                            height: 1000,
                            width: 1000
                        });
                         </script>

Can it be done, thanks

Answer 1

You're going about things the wrong way and making it more difficult than it needs to be. The Galleria plugin expect HTML to be organized as follows:

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

As you can see, there is nothing but images inside of a div. You have a table structure which will not work. Use the following code to run a quick sample and you'll see how easy it is.

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

And that's it. You should have a simple Galleria gallery running in the browser.