Feedback Form

Friday, February 08, 2008

SlideShowExtender Fade effect

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#"%>
<!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
Reference

10 comments:

Anonymous said...

im sorry but i get javascript error

not working...

Amr ElGarhy said...

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

Anonymous said...

thank you very much.It's greate
Nguyen Xuan Canh
email:nxccxn@yahoo.com

jean said...

i got a javascript error plzzzz help :"nextSlide is undefined"

Amr ElGarhy said...

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

Anonymous said...

why is the animation so choppy? The images spend more time blank than showing to the user

Stu said...

How do you stop the choppy speed?

Pravesh Singh said...

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

Shrilekha said...

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.

Shrilekha said...

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.