使用广场jQuery插件与一个asp.net的ListView [英] Using Galleria jQuery plugin with an asp.net ListView

问题描述

我试图使用广场，提供一个asp.net的ListView，经过这些获取的图像源从数据库图像上传。以下是我的列表视图：

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>

和这里是我的jQuery的：

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

推荐答案

您要去的事情的错误的方式，使之更加困难比它需要。该广场预计插件HTML被安排如下：

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>

正如你所看到的，没有什么，但一个div中的图像。你有一个表结构，将无法正常工作。使用以下code运行快速出样，你会看到它是多么容易。

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

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

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

这篇关于使用广场jQuery插件与一个asp.net的ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！