Rotator fade not working

3 posts, 1 answers
  1. Mike_T
    Mike_T avatar
    36 posts
    Member since:
    Aug 2006

    Posted 03 Jun 2011 Link to this post

    Hello,

    I'm trying to embed the rotator as mentioned in the telerik examples, but it is not fading the images. The images are moving from right to left and they are not performing the fade effect even the sample is copy paste from the telerik samples.

    Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
      
    <head runat="server">
        <title></title>
         <style type="text/css">
            .rotatorBackground
            {
                float: left;
                margin-left: 50px;
                margin-top: 10px;
                width: 440px;
                height: 185px;
                border: solid 2px #dedede;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
            }
            .rotatorStyle
            {
                margin: 40px auto 0px;
            }
            .rotatorStyle .RotatorItem
            {
                margin:5px;
                height: 100px;
                width: 100px;
            }
            .rotatorCarouselStyle
            {
                margin: 0px auto;
            }
            .RotatorItem
            {
                border: solid 1px #dff3ff !important;
            }
            .mainDiv
            {
                margin-bottom: 20px;
            }
            .configurationPanel
            {
                width: 290px;
                border: 0px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
          
        </telerik:RadScriptManager>
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30"
            EnableSkinTransparency="false" BackColor="#E0E0E0">
        </telerik:RadAjaxLoadingPanel>
         
        <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
            <div class="mainDiv">
                <div class="rotatorBackground">
                    
                    <telerik:RadRotator ID="RadRotator1" runat="server" Width="224px" Height="112px"
                        CssClass="rotatorStyle" ItemHeight="112" ItemWidth="112" 
                        SlideShowAnimation-Type="Fade" SlideShowAnimation-Duration="3000"  >
                        <Items>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image" ImageUrl='Img/Northwind/Customers/Thumbs/ANATR.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image1" ImageUrl='Img/Northwind/Customers/Thumbs/ANTON.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image2" ImageUrl='Img/Northwind/Customers/Thumbs/BOTTM.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/CACTU.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/CENTC.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/ERNSH.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/LAUGB.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/MAISD.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/MEREP.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                            <telerik:RadRotatorItem>
                                <ItemTemplate>
    <asp:Image runat="server" ID="Image3" ImageUrl='Img/Northwind/Customers/Thumbs/OCEAN.jpg'
    CssClass="RotatorItem" AlternateText="Customer Image" />
                                </ItemTemplate>
                            </telerik:RadRotatorItem>
                        </Items>
                    </telerik:RadRotator>
                </div>
            </div>
        </telerik:RadAjaxPanel>
      
        </form>
    </body>
    </html>

    Thanks for your help
  2. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 03 Jun 2011 Link to this post

    Hello Mike,

    Please, make sure you have defined the type of the RadRotator to be SlideShow. Only the SlideShow type of rotation takes advantage of the fade effect. Please, review the following help article for further information on the topic - http://www.telerik.com/help/aspnet-ajax/rotator-types.html.

    Hope this helps.


    Best wishes,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike_T
    Mike_T avatar
    36 posts
    Member since:
    Aug 2006

    Posted 03 Jun 2011 Link to this post

    Thanks a lot Niko, Your help solved the problem.
     I appreciate so much

    Michel
Back to Top