Rad Rotator fade animation from code

[loai taha]

Dear Telerik support,

I'm looking to control rad rotator showed items from code, however, I need to use the fade animation type. using such type of animation requires setting the rotator type to slide show, and doing that leads to a series of strange behavior if user used the animation direction controls "custom controls and JavaScript code" as well as frames numbers "a set of click-able buttons that shows the relevant frame". I would appreciate any suggestions or help.

Regards,

[Fiko]

Hi loai,

You can achieve the desired result using RadRotator's built-in methods and I recommend you to follow these steps:

• Set RotatorType="FromCode" - this ensures that the control will not start when it is loaded
• Set desired SlideShow animation properties:
  

  <SlideShowAnimation Duration="2000" Type="Fade" />

• Attach a handler to the OnClientLoad event of the control:
  

  <telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="XmlDataSource1"
      Width="100px" ItemWidth="100px" ItemHeight="100px" Height="100px" RotatorType="FromCode"
      OnClientLoad="OnClientLoad">
      <ItemTemplate>
          <asp:Image ID="Image1" runat="server" ImageUrl='<%# XPath("ImageURL") %>' CssClass="imgSize" />
      </ItemTemplate>
      <SlideShowAnimation Duration="2000" Type="Fade" />
  </telerik:RadRotator>

• The handler looks like this:
  
  function OnClientLoad(oRotator, args)

  {

      setTimeout(function ()

      {

          oRotator.set_rotatorType(Telerik.Web.UI.RotatorType.SlideShow); // Set Slideshow

          oRotator.stop(); // Stop slideshow animation


      }, 100);

  }
  
• Add two buttons (or images, etc) that call the showNext metod of the RadRotator control:
  

  <asp:Button ID="Button1" runat="server" OnClientClick="showNextItem(0); return false;"
      Text="Left" />
  <asp:Button ID="Button2" runat="server" OnClientClick="showNextItem(1); return false;"
      Text="Right" />

• The showNextItem method looks like this:
  

  function showNextItem(dir)
  {
      var oRotator = $find("<%= RadRotator1.ClientID %>");
      if (dir == 0)
      {
          oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
      }
      else
      {
          oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
      }
  }

• Wrap the JavaScript code in a telerik:RadScriptBlock control in order to avoid error messages caused by the server parentheses - <%=

I hope this helps.

Greetings,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[loai taha]

Hi Fiko,

Honestly I lost hope that someone would answer my query, anyway I shall try out the above suggestion, and will get back to you upon issues/questions.

Thanks for your help.

Regards,

[loai taha]

Dear Fiko,

I tried to implement your code, however, the rotator behaved weirdly and things didn't go the way I asked about. I want to be able to use the Fade effect from code, at the same time I want the rotator to start automatically, to move to next and previous items, as well as pausing the rotator. On the other hand, I'm looking to control the rotator frames show by a set of numbered buttons, what ever button u press the frame the correspondent frame shall show. Please let me know if such a thing is not applicable, other wise I would appreciate providing complete code. Unless I shall go and open a ticket asking for help on that!

Regards,

[Fiko]

Hello loai,

The RadRotator control does not provide such functionality out of the box, but you can implement it by mixing the provided solution in this thread, this online demo and this code library. Each of the provided examples accomplish a part of your requirements and you need to integrate them in a project in order to achieve the desired result.

I hope this helps.

Kind regards,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.