Is it possible to use the SlideShowExtender and AnimationExtender together to create a slide show with images fading in and out? It seems that there is no OnLoad event for images in a slide show and therefore you can't set an animation for that event.
I would love to know the answer to this question too. I saw in the source code that the events are indeed raised in the Java code, but that there is no connection between these events and the C# code from what I can see.
How does one detect these events and execute C# code based on them?
The amount of work required to hook into those events is a little more than I would have expected. There needs to be more support internally from the extender and the behavior to be able to plug animations into it. And this is a toolkit issue i.e. we need
to add this support to most extenders in the toolkit. This will be added as a part of the events support so that you can easily add animtions to any extender in the toolkit. You should find this in the next release.
Kirti Deshpande
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
I've been searching on this topic for a few hours now and every lead seems to come to a dead end like this one. Does anyone have any new information regarding putting a transition effect or animation effect, preferrably a fade in and fade out effect, between
the slides shown in the slideshowextender? Any help would be greatly appreciated! Thanks!
I've made a slideshow with the animation extender and ATLAS markup that works well for most applications. I wanted to have a slideshow that could have images or html and could be quickly reusable. There are a few issues with it: it must be absolutely positioned
(for each div to appear above the others). Because of this, I've had issues placing variable height content inside it and had page flow problems with elements below it (items appearing under the slideshow). I'f be interested to hear if anyone else has had
the same issues and how they dealt with them. Enjoy:
<div id="usFade0" runat="server" class="firstFade"> This is slide 0 </div>
<div id="usFade1" runat="server" class="Fade" > This is slide 1 </div>
<div id="usFade2" runat="server" class="Fade" > This is slide 2 </div>
<div id="usFade3" runat="server" class="Fade" > This is slide 3 </div>
Ashiki
Member
145 Points
43 Posts
SlideShowExtender + AnimationExtender
Mar 13, 2007 12:51 PM|LINK
kirtid
Contributor
2610 Points
658 Posts
AspNetTeam
Re: SlideShowExtender + AnimationExtender
Mar 13, 2007 05:45 PM|LINK
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
Ashiki
Member
145 Points
43 Posts
Re: SlideShowExtender + AnimationExtender
Mar 14, 2007 10:56 AM|LINK
patricker
Member
59 Points
20 Posts
Re: SlideShowExtender + AnimationExtender
Mar 18, 2007 03:49 PM|LINK
I would love to know the answer to this question too. I saw in the source code that the events are indeed raised in the Java code, but that there is no connection between these events and the C# code from what I can see.
How does one detect these events and execute C# code based on them?
kirtid
Contributor
2610 Points
658 Posts
AspNetTeam
Re: SlideShowExtender + AnimationExtender
Mar 19, 2007 11:50 PM|LINK
The amount of work required to hook into those events is a little more than I would have expected. There needs to be more support internally from the extender and the behavior to be able to plug animations into it. And this is a toolkit issue i.e. we need to add this support to most extenders in the toolkit. This will be added as a part of the events support so that you can easily add animtions to any extender in the toolkit. You should find this in the next release.
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
Ashiki
Member
145 Points
43 Posts
Re: SlideShowExtender + AnimationExtender
Mar 20, 2007 11:10 AM|LINK
jsparks
Member
39 Points
15 Posts
Re: SlideShowExtender + AnimationExtender
Oct 12, 2007 03:42 AM|LINK
I've been searching on this topic for a few hours now and every lead seems to come to a dead end like this one. Does anyone have any new information regarding putting a transition effect or animation effect, preferrably a fade in and fade out effect, between the slides shown in the slideshowextender? Any help would be greatly appreciated! Thanks!
Jim Sparks
Raymond Wen...
All-Star
32101 Points
3764 Posts
Re: SlideShowExtender + AnimationExtender
Jan 22, 2008 10:38 AM|LINK
Here is an 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>timthemagician
Member
2 Points
1 Post
Re: SlideShowExtender + AnimationExtender
Apr 11, 2008 07:34 PM|LINK
Great work! Very much appreciated.
Amagill
Member
2 Points
1 Post
Re: SlideShowExtender + AnimationExtender
Apr 14, 2008 09:56 PM|LINK
.Fade
{
position:absolute;
filter: alpha(opacity=0);
-moz-opacity: 0.0;
z-index:5;
}
.firstFade
{
position:absolute;
z-index:6;
}
<div id="usFade0" runat="server" class="firstFade"> This is slide 0 </div>
<div id="usFade1" runat="server" class="Fade" > This is slide 1 </div>
<div id="usFade2" runat="server" class="Fade" > This is slide 2 </div>
<div id="usFade3" runat="server" class="Fade" > This is slide 3 </div>
<act:AnimationExtender id="USslideShow" runat="server" TargetControlID="usFade0">
<Animations>
<OnLoad>
<Sequence iterations="0" >
<Parallel Duration="6" >
<StyleAction Attribute="zIndex" Value="5" AnimationTarget="usFade0" />
<StyleAction Attribute="zIndex" Value="6" AnimationTarget="usFade1" />
</Parallel>
<%--------------------------- Fade 1 second ---------------------%>
<Parallel Duration="1" >
<FadeOut AnimationTarget="usFade0" />
<FadeIn AnimationTarget="usFade1" />
</Parallel>
<Parallel Duration="6" >
<StyleAction Attribute="zIndex" Value="5" AnimationTarget="usFade1" />
<StyleAction Attribute="zIndex" Value="6" AnimationTarget="usFade2" />
</Parallel>
<%--------------------------- Fade 1 second ---------------------%>
<Parallel Duration="1" >
<FadeOut AnimationTarget="usFade1" />
<FadeIn AnimationTarget="usFade2" />
</Parallel>
<Parallel Duration="6" >
<StyleAction Attribute="zIndex" Value="5" AnimationTarget="usFade2" />
<StyleAction Attribute="zIndex" Value="6" AnimationTarget="usFade3" />
</Parallel>
<%--------------------------- Fade 1 second ---------------------%>
<Parallel Duration="1" >
<FadeOut AnimationTarget="usFade2" />
<FadeIn AnimationTarget="usFade3" />
</Parallel>
<Parallel Duration="6" >
<StyleAction Attribute="zIndex" Value="5" AnimationTarget="usFade3" />
<StyleAction Attribute="zIndex" Value="6" AnimationTarget="usFade0" />
</Parallel>
<%--------------------------- Fade 1 second ---------------------%>
<Parallel Duration="1" >
<FadeOut AnimationTarget="usFade3" />
<FadeIn AnimationTarget="usFade0" />
</Parallel>
</Sequence>
</OnLoad>
</Animations>
</act:AnimationExtender>
positioning SlideShow AjaxControl Toolkit animation examples zIndex SlideShowExtender "Ajax Control Toolkit" animationextender AjaxToolKit Position animation extender