Question

I can't make working Slideshow script with Masterpage. Below one works fine, now I need to convert to ASPX project with MasterPage.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        var i = 1;
        function fun() {
            i++;
            document.getElementById("img1").src = "images/" + i + ".jpg";
            if (i == 2) //here 2 is number of images i want to display in the slide show
            { i = 0; }
        }
        setInterval("fun()", 4000);
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Image ID="img1" runat="server"  src="images/1.jpg" Height="500px" Width="1000px"  />
    </div>
    </form>
</body>
</html>

Here is what I tried. Masterpage

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
            <script language="javascript" type="text/javascript">
                var i = 1;
                function fun() {
                    i++;
                    document.getElementById("img1").src = "images/" + i + ".jpg";
                    if (i == 2) //here 2 is number of images i want to display in the slide show
                    { i = 0; }
                }
                setInterval("fun()", 4000);
</script> 

</head>
<body>
    <form id="form1" runat="server">
    <div>

       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Here is code for Aspx derived from my Master page.

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Image ID="img1" runat="server"  src="images/1.jpg" Height="500px" Width="1000px"  />

</asp:Content>

Please let me know.

Was it helpful?

Solution

Try this

MAster Page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <script type="text/javascript">

         var i = 1;
         function fun() {debugger;
             i++;
             document.getElementById("<%=img1.ClientID%>").src = "images/" + i + ".jpg";
             if (i == 2) //here 2 is number of images i want to display in the slide show
             { i = 0; }
         }
         setInterval("fun()", 4000);
</script> 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Image ID="img1" runat="server"  src="images/1.jpg" Height="500px" Width="1000px"  />

</asp:Content>

OTHER TIPS

Try this:

document.getElementById("<%# img1.ClientID %>").src = "images/" + i + ".jpg";
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top