Использование плагина Galleria jQuery с asp.net ListView

Question

Я пытаюсь использовать Galleria с 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>

Можно ли это сделать, спасибо

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.