htmlinitgalleria

Init failed: Galleria could not find the element "#runPics"

I have this error on my page using Galleria I created a test page before and it worked perfectly. but ow I need to use it on a content page from master so when I brought all data over, it gave this error. it loads the listview with pics, but not galleria please help

<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

<script type="text/javascript" src="../galleria/galleria-1.2.9.min.js"></script>
<script type="text/javascript" src="../galleria/themes/classic/galleria.classic.min.js"></script>
<link type="text/css" rel="stylesheet" href="../gallerai/themes/classic/galleria.classic.css" />

<style >
    #galleria
    {
        width: 700px;
        height: 400px;
        background: #000;
    }
</style>
<style >
    .body
    {
        width: 700px;
        height: 500px;
    }
</style>


<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="select i.imageID, g.Title, i.[Image Title], i.[Image] from Images i, Gallery g where g.ID = i.[Gallery ID]"></asp:SqlDataSource>

    <div style="width: 700px; text-align: center; height: 500px">
        <div id="runPics" runat="server">
        <br />
        <br />

        <asp:ListView ID="lstPics" runat="server" DataSourceID="SqlDataSource1">


            <ItemTemplate>
                <td>

                    <Club:ImageThumbnail ID="ImageThumbnail2" runat="server" PhotoID='<%# Bind("imageID") %>' />

                </td>
            </ItemTemplate>
        </asp:ListView>
    </div>
</div>

<%--    <div id="galleria">
    <img src="../images/1.jpg">
    <img src="../images/3.jpg">
    <img src="../images/4.jpg">
    <img src="../images/5.jpg">
    <img src="../images/6.jpg">
    <img src="../images/7.jpg">
</div>--%>

<script >
    //$('#gallery').galleria({
    //    width: 700,
    //    height: 400
    //});
    //Galleria.loadTheme('../galleria/themes/classic/galleria.classic.min.js');
    Galleria.configure({
        transition: 'fade'

    });
    Galleria.run('#runPics', {
        autoplay: 5000
    });
    Galleria.ready(function (o) {
        var gallery = this,
            p = !!o.autoplay;
        this.$('thumbs,more').click(function () {
            gallery.pause();
        });
        this.$('desc,thumbnails').click(function () {
            p && gallery.play();
        });
    });

</script>
    </html>

all this is inbetween a asp:content tag

Solution

  • fixed it

    changed web.config to : system.web pages controlRenderingCompatibilityVersion="3.5" clientIDMode="Static" />

    and removed the td> tags in my listview