Resumé

Image Rotator Extender using ASP.NET AJAX Beta 1.0

Cristian Merighi () 0.00

A simple and scalable sample about how to build your own custom extender and, at the same time, enrich an img Object with slideshow functionality.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

In this article I report a simple, working, and easy-to-implement ASP.NET AJAX custom extender built upon Beta 1.0 version.

Control's task is to extend an image object giving it slideshow functionality and a baked FadeIn effect.

Let's sketch and list the required ingredients for this recipe:

  • ASP.NET AJAX Beta 1.0 Core: we definitely need a ScriptManager;
  • ASP.NET AJAX 1.0 CTP: we'll exploit objects like Sys.Preview.Timer, Sys.Preview.UI.Image and Sys.Preview.UI.Effects.FadeAnimation;
  • ASP.NET AJAX Control Project (Visual Studio Template): for ease of development.

The project is entirely downloadable below, I just report some code strips...

How to use the ImageRotatorExtender in a WebForm:

<!-- OMITTED CODE -->
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <!-- Be sure you reference these two CTP scripts -->
            <asp:ScriptReference 
                Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" 
                Assembly="Microsoft.Web.Preview" />
            <asp:ScriptReference 
                Name="Microsoft.Web.Resources.ScriptLibrary.PreviewGlitz.js" 
                Assembly="Microsoft.Web.Preview" />
       </Scripts>
    </asp:ScriptManager>
    
    <asp:Image runat="server" 
    ImageUrl="~/PacemXC.jpg" ID="img" />
    
    <pacem:ImageRotatorExtender ID="ire" runat="server" 
    Interval="10000" TargetControlID="img" 
    ImageArray="~/PacemXC.jpg,~/PacemXC2.jpg,~/PacemXC3.jpg">
    </pacem:ImageRotatorExtender>
    
</form>
<!-- OMITTED CODE -->

javascript class descriptor:


/*
    CORE PROPERTIES:
    Interval: milliseconds, duration of the transition between a picture and the next one.
    ImageArray: comma-separated string with the path to the images to slide.

*/
Pacem.Web.Extensions.ImageRotatorBehavior.descriptor = {
    properties: [   {name: 'Interval', type: Number}, 
                    {name: 'ImageArray', type: Array},
                    {name: 'currentIndex', type: Number, readOnly: true} ]
}

As a demo please refer to the picture of my big faces rotating on the right...

zip file « download .zip file

Take care. Bye.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds