Blog di Bruno Fortunato

.Net Developer (and many more) - Direct3D Lover
There are 10 kind of person in the world, who understand binary code and who not!

Semplice FadeIn/Slideshow con Atlas

Atlas mette a disposizione una serie di librerie davvero carine con le quali, con poche righe di codice, รจ possibile ottenere semplici ed interessanti effetti.

E con esse che ho provato a realizzare un semplice slideshow con fadein!

Spero possa esservi utile.

Sorgente con sintassi dichiarativa:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
   
    <script type="text/javascript">
        var index = 0;
        var images = Array(
            "http://atlas.asp.net/docs/images/logo.gif",
            "http://www.google.it/intl/it_it/images/logo.gif",
            "http://www.dotnetside.org/Themes/default/images/common/title.gif" 
        );
       
        function slider_onTick(sender, eventArgs)
        {
            var image = $object("image");
            var fader = $object("fader");

            fader.stop();
           
            index++;
            if(index>=images.length)
                index=0;
               
            image.set_imageURL(images[index]); 
           
            fader.play();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <atlas:ScriptReference ScriptName="AtlasUIGlitz" />
            </Scripts>
        </atlas:ScriptManager>
       
        <h3>Simple SlideShow</h3>
        <img id="image" src="http://atlas.asp.net/docs/images/logo.gif" />
    </form>

    <script type="text/xml-script">
        <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <timer id="slider" interval="5000" tick="slider_onTick" enabled="true" />
                <image id="image" />
                <fadeAnimation id="fader" target="image" effect="fadeIn" />
               
                <application>
                    <load>
                        <invokeMethod target="fader" method="play" />
                    </load>
                </application>
            </components>
        </page>
    </script>
</body>
</html>


Sorgente con sintassi programmatica:

<%@ Page Language="C#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
   
    <script type="text/javascript">
        var index = 0;
        var fader;
        var images = Array(
            "http://atlas.asp.net/docs/images/logo.gif",
            "http://www.google.it/intl/it_it/images/logo.gif",
            "http://www.dotnetside.org/Themes/default/images/common/title.gif" 
        );
       
        function pageLoad()
        {
            image = new Sys.UI.Image($("image"));
            image.set_imageURL(images[index]);
            image.initialize();
           
            fader = new Sys.UI.FadeAnimation();
            fader.set_target(image);
            fader.set_effect(Sys.UI.FadeEffect.FadeIn);
            fader.initialize();       
           
            var slider = new Sys.Timer();
            slider.set_enabled(true);
            slider.set_interval(5000);
            slider.tick.add(slider_onTick);
            slider.initialize();
           
            fader.play();
        }
       
        function slider_onTick(sender, eventArgs)
        {
            fader.stop();
           
            index++;
            if(index>=images.length)
                index=0;
               
            image.set_imageURL(images[index]); 
           
            fader.play();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <atlas:ScriptReference ScriptName="AtlasUIGlitz" />
            </Scripts>
        </atlas:ScriptManager>
        <h3>Simple SlideShow</h3>
        <img id="image" src="http://atlas.asp.net/docs/images/logo.gif" />
    </form>
</body>
</html>


Bruno Fortunato
Posted: May 12 2006, 06:42 PM by DaViL | with no comments
Filed under: