Posts
You can make fade effect while sliding and there is a good way by using SlideShowExtender + AnimationExtender like the following good sample:
<%@ Page Language="C#"%>Reference
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
[System.Web.Services.WebMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Blue hills.jpg", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Sunset.jpg", "Sunset", "Setting sun"),
new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Winter.jpg", "Winter", "Wintery..."),
new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Water lilies.jpg", "Water lillies", "Lillies in the water"),
new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/VerticalPicture.jpg", "Sedona", "Portrait style picture")};
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var fadein;
var fadeout;
function pageLoad()
{
var ss=$find("ss1");
ss.add_slideChanging(onChanging);
var ae=$find("ae");
var be=ae.get_OnLoadBehavior();
var an=be.get_animation();
fadein=an.get_animations()[1];
fadeout=an.get_animations()[0];
fadein.set_duration(0.5);
fadeout.set_duration(0.5);
}
function onChanging(sender, args)
{
fadein.play();
window.setTimeout("fadeout.play()", 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptLocalization="true" EnableScriptGlobalization="true">
</asp:ScriptManager>
<asp:Image ID="Image1" runat="server"
Height="300"
Style="border: 1px solid black;width:auto"
AlternateText="Blue Hills image" />
<ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server"
TargetControlID="Image1" BehaviorID="ss1"
SlideShowServiceMethod="GetSlides" PlayInterval="2000"
AutoPlay="true"
Loop="true" />
<ajaxToolkit:AnimationExtender id="MyExtender" runat="server" BehaviorID="ae" TargetControlID="Image1">
<Animations>
<OnLoad>
<Sequence>
<FadeOut Duration="0" Fps="20" />
<FadeIn Duration="0" Fps="20" />
</Sequence>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
</form>
</body>
</html>
Download Sample
10 comments:
im sorry but i get javascript error
not working...
this is based on this refrence,
http://forums.asp.net/t/1086320.aspx
so you can tell me the error you had , may be i can help you solve
thank you very much.It's greate
Nguyen Xuan Canh
email:nxccxn@yahoo.com
i got a javascript error plzzzz help :"nextSlide is undefined"
this example is based on this: http://forums.asp.net/t/1086320.aspx
if you want help can you send me the example you did and had an error in, send me the page its self on my mail
amrelgarhy81@gmail.com
why is the animation so choppy? The images spend more time blank than showing to the user
How do you stop the choppy speed?
Very informative post. Its really helpful for me and beginner too. Check out this link too its also having a nice post with wonderful explanation on Ajax Toolkit SlideShowExtender Control in ASP.Net...
Ajax Toolkit SlideShowExtender Control in ASP.Net
lusiI want both fade in and move effect to slide show...by this code i am able to do fading effect...Please tell me solution of above.
I want both fade in and move effect to slide show...by this code i am able to do fading effect...Please tell me solution of above.
Post a Comment