I am trying to develop an image slideshow on a page. It works completely fine on its own but it doesn't work when working under a master page (It changes a picture when I refresh the page). Here is javascript in Default.aspx:
<img id="photo" src="" runat="server" border="0" />
<script type="text/javascript">
//A timer will be fired in 5 seconds to call getNextImage()
var c_interval = 5000;
window.setTimeout("getNextImage()", c_interval);
function getNextImage()
{
//Send the request to server with the current image url as the argument
CallServer(document.getElementById("photo").src, "");
}
function ReceiveServerData(rValue)
{
//Receive server's response of a string rValue, which is prepared in the server's function
//GetCallbackResult()
var wds = rValue.split(";");
//Assign the transition effect
document.getElementById("photo").style.filter = wds[1];
//Preload the image file from server. When finishing download, imageLoaded function will be called
//with the img object as the argument
var img = new Image();
img.onload = function(){ imageLoaded(this); }
img.onerror = function(){ imageError(this); }
img.onabort = function(){ imageError(this); }
img.src = wds[0];
}
function imageError(img)
{
//If image download errors occur, this function will be called.
window.setTimeout("getNextImage()", 1000);
}
function imageLoaded(img)
{
var photo = document.getElementById("photo"); //Find the image control object
photo.filters[0].apply(); //Apply the transition effect
photo.filters[0].play(); //Play the effect and display the new image
photo.src = img.src; //Assign the image to the image control
window.setTimeout("getNextImage()", c_interval);//Initiate the next request
}
</script>
and here is the code in Default.aspx.cs
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
string m_lastFileName = "none";
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
//photo.Src = GetNextImageUrl();
//Register Ajax client script to client's browsers. This has to be hard coded.
string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}
public void RaiseCallbackEvent(string eventArgument)
{
//This is first place to receive the callback from client's browser. The parameter 'eventArgument'
//is the parameter passed from the Javascript's call 'CallServer()'. In this example, it is the
//last image url.
m_lastFileName = Path.GetFileName(eventArgument);
}
public string GetCallbackResult()
{
//This is the second call triggled by the 'CallServer()' and it is the place to prepare and return a string
//to the client. Here the returned string is the image url and the transition effect.
return GetNextImageUrl() + ";" + GetNextTransition();
}
Any help would be appreciated and thanks for your precious time.
Cheers!
Mujtaba
Image slideshow
Regards,
Mujtaba
"Make everthing as simple as possible, but not simpler" A.Einstein
P.S: Please don't forget to mark the answer if you got it!
Different ClientID's are generated when server controls are placed under containers( ContentPlaceHolder etc ect). So its is quite possible that the following line is throwing an error,
You need to find out where exactly the error is being thrown, I would suggest you to first debug the Javascript to see if you are code is able to make a call to the server, if yes, then have to find what code is failing at the server. For debugging Javascript
I would recommend FireBug(http://getfirebug.com/)
addon for Firefox. This will be help you track the error.
I have a problem with my Ajax slide show control. As when I put it in a a separate page without including Master page for this page it works well. But when I put my Ajax slide show control on a page that has master page for it it gives an error when I run
it. The error message is
questsal78
Member
41 Points
37 Posts
Image slideshow using master page
Nov 09, 2009 12:12 AM|LINK
Hello Reader!
I am trying to develop an image slideshow on a page. It works completely fine on its own but it doesn't work when working under a master page (It changes a picture when I refresh the page). Here is javascript in Default.aspx:
<img id="photo" src="" runat="server" border="0" /> <script type="text/javascript"> //A timer will be fired in 5 seconds to call getNextImage() var c_interval = 5000; window.setTimeout("getNextImage()", c_interval); function getNextImage() { //Send the request to server with the current image url as the argument CallServer(document.getElementById("photo").src, ""); } function ReceiveServerData(rValue) { //Receive server's response of a string rValue, which is prepared in the server's function //GetCallbackResult() var wds = rValue.split(";"); //Assign the transition effect document.getElementById("photo").style.filter = wds[1]; //Preload the image file from server. When finishing download, imageLoaded function will be called //with the img object as the argument var img = new Image(); img.onload = function(){ imageLoaded(this); } img.onerror = function(){ imageError(this); } img.onabort = function(){ imageError(this); } img.src = wds[0]; } function imageError(img) { //If image download errors occur, this function will be called. window.setTimeout("getNextImage()", 1000); } function imageLoaded(img) { var photo = document.getElementById("photo"); //Find the image control object photo.filters[0].apply(); //Apply the transition effect photo.filters[0].play(); //Play the effect and display the new image photo.src = img.src; //Assign the image to the image control window.setTimeout("getNextImage()", c_interval);//Initiate the next request } </script>and here is the code in Default.aspx.cs
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler { string m_lastFileName = "none"; protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) return; //photo.Src = GetNextImageUrl(); //Register Ajax client script to client's browsers. This has to be hard coded. string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context"); string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;"; Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true); } public void RaiseCallbackEvent(string eventArgument) { //This is first place to receive the callback from client's browser. The parameter 'eventArgument' //is the parameter passed from the Javascript's call 'CallServer()'. In this example, it is the //last image url. m_lastFileName = Path.GetFileName(eventArgument); } public string GetCallbackResult() { //This is the second call triggled by the 'CallServer()' and it is the place to prepare and return a string //to the client. Here the returned string is the image url and the transition effect. return GetNextImageUrl() + ";" + GetNextTransition(); }Any help would be appreciated and thanks for your precious time.
Cheers!
Mujtaba
Image slideshow
Mujtaba
"Make everthing as simple as possible, but not simpler" A.Einstein
P.S: Please don't forget to mark the answer if you got it!
ratish_shriy...
Contributor
2194 Points
308 Posts
Re: Image slideshow using master page
Nov 09, 2009 06:26 AM|LINK
Hi,
Different ClientID's are generated when server controls are placed under containers( ContentPlaceHolder etc ect). So its is quite possible that the following line is throwing an error,
document.getElementById("photo").src
for
<img id="photo" src="" runat="server" border="0" />
Replace those lines with,
document.getElementById("<%= photo.ClientID %>").src
To get the correct reference to the img tag.
Hope this helps!
questsal78
Member
41 Points
37 Posts
Re: Image slideshow using master page
Nov 09, 2009 07:15 PM|LINK
Hi!
Ratish Thanks for your reply. I have tried this but it doesn't work!!
any other suggestions?
Cheers
Mujtaba
"Make everthing as simple as possible, but not simpler" A.Einstein
P.S: Please don't forget to mark the answer if you got it!
ratish_shriy...
Contributor
2194 Points
308 Posts
Re: Image slideshow using master page
Nov 10, 2009 10:56 AM|LINK
Hi,
You need to find out where exactly the error is being thrown, I would suggest you to first debug the Javascript to see if you are code is able to make a call to the server, if yes, then have to find what code is failing at the server. For debugging Javascript I would recommend FireBug(http://getfirebug.com/) addon for Firefox. This will be help you track the error.
Hope this helps!
questsal78
Member
41 Points
37 Posts
Re: Image slideshow using master page
Nov 10, 2009 10:55 PM|LINK
Thanks for ur reply, I have done the same task using javascript for now. I will try in future as you have mentioned.
Thanks for your help.
Mujtaba
"Make everthing as simple as possible, but not simpler" A.Einstein
P.S: Please don't forget to mark the answer if you got it!
hardtoget410
Member
114 Points
231 Posts
Re: Image slideshow using master page
Mar 16, 2011 02:29 PM|LINK
I have a problem with my Ajax slide show control. As when I put it in a a separate page without including Master page for this page it works well. But when I put my Ajax slide show control on a page that has master page for it it gives an error when I run it. The error message is
Line: 93
Error: 'null' is null or not an object
This is my code
<tr> <td> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <script runat="server"> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static AjaxControlToolkit.Slide[] GetSlides() { return new AjaxControlToolkit.Slide[] { new AjaxControlToolkit.Slide("events/acting 1.jpg", "Blue Hills", "Go Blue"), new AjaxControlToolkit.Slide("events/acting 2.jpg", "Sunset", "Setting sun"), new AjaxControlToolkit.Slide("events/acting 3.jpg", "Sedona", "Portrait style picture")}; } </script> <asp:Label runat="Server" ID="imageTitle" CssClass="slideTitle"/><br /> <asp:Image ID="Image1" runat="server" Height="300" Style="border: 1px solid black;width:auto" ImageUrl="events/acting 1.jpg" AlternateText="Blue Hills image" /> <asp:Label runat="server" ID="imageDescription" CssClass="slideDescription"></asp:Label><br /><br /> <asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" /> <asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" /> <asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" /> <asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1" SlideShowServiceMethod="GetSlides" ImageTitleLabelID="imageTitle" ImageDescriptionLabelID="imageDescription" NextButtonID="nextButton" PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton" PlayButtonID="playButton"> </asp:SlideShowExtender> </td> </tr></div>Ahmad_Andhik...
Member
4 Points
1 Post
Re: Image slideshow using master page
Oct 31, 2012 02:08 PM|LINK
Please Make Sure in your default aspx having interface with
"public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler"
Im facing same problem and solve it now.