RotatorType=Buttons

[Tiago]

Hi,

I'm having a problem using Rotator. I'm using an older version than the one showed in your demos. I'm using version 2.7 and i need the Buttons Rotator Type . This version does not support that property. I'd like to know if there's any way to implement the Rotator using the buttons Type with the current Rotator version on my application.

Thanks

Tiago Gerevini

[Fiko]

Hello Tiago,

I recommend you to use your custom buttons and implement the solution shown in this online demo.

Sincerely yours,
Fiko
the Telerik team

[Tiago]

I used another demo and it worked pretty good.... but i still need some help...

here is the code:

 

<table width="773" cellpadding="0" cellspacing="0" border="0" id="tblRotacao" runat="server"
                height="100%">
                <tr valign="middle">
                    <td valign="middle">
                        <img src="~/Imagens/bot_seta_esq_expo.png" id="img_left" alt="" style="cursor: pointer"
                            runat="server" />
                    </td>
                    <td style="padding: 0px 0px 0px 5px;" valign="top">
                        <radr:RadRotator ID="thumbRotator" runat="server" AutoAdvance="false" Width="900"
                            Height="200" TransitionType="Scroll" ScrollDirection="Left" FrameTimeout="0"
                            ScrollSpeed="1" FramesToShow="3" UseSmoothScroll="true" OnItemDataBound="thumbRotator_ItemDataBound">
                            <FrameTemplate>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="top" style="text-align: left; width: 250px">
                                            <asp:Label ID="lblData" runat="server" CssClass="titulo_data_carrossel"></asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top" style="text-align: left; width: 250px">
                                            <asp:Label ID="lblTitulo" runat="server" CssClass="div_titulo_carrossel"></asp:Label>
                                        </td>
                                        <td rowspan="4" style="text-align: left">
                                            <div class="div_divisor_carrossel">
                                                <img alt="" src="~/Imagens/img/divisoria.png" class="img_divisor_carrossel" />
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" class="bloco_conteudo_carrossel div_texto_carrossel" style="text-align: left;">
                                            <textarea class="texto_carrossel" id="lblConteudo" runat="server" cols="40" rows="8"
                                                readonly="readonly" style="overflow: hidden; border: 0;"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="width: 300px">
                                            <asp:HyperLink ID="lnkSaibaMais" Font-Size="14px" CssClass=" bloco_conteudo_carrossel carrossel_fundo_saibamais"
                                                runat="server" Target="_blank">Saiba mais   </asp:HyperLink>
                                        </td>
                                    </tr>
                                </table>
                            </FrameTemplate>
                        </radr:RadRotator>
                    </td>
                    <td>
                    </td>
                    <td valign="middle">
                        <img src="~/Imagens/bot_seta_dir_expo.png" id="img_right" alt="" style="cursor: pointer"
                            runat="server" />
                    </td>
                </tr>
            </table>

 

 

 

 

<script type="text/javascript">

    function showCallbackImage(srcElement) {
        window["<%= RadAjaxManager1.ClientID %>"].AjaxRequest("ShowImage?" + srcElement.src);
    }

    var canStart = true;
    function ChangeDirection(dir) {
        if (!canStart)
            return;
        else
            canStart = false;
        var rotator = window["<%= thumbRotator.ClientID %>"];
        rotator.ScrollDirection = dir;
        rotator.StartRotator();
        if (dir == "left") {
            rotator.ScrollLeftNextFrame();
            rotator.StopRotator();
        }
        else {
            rotator.ScrollRightNextFrame();
            rotator.StopRotator();
        }
    }
    function FreezeRotator() {
        var rotator = window["<%= thumbRotator.ClientID %>"];
        rotator.Freeze();
        rotator.StopRotator();
        canStart = false;
        window.setTimeout(function() { canStart = true; }, 100);
    }
    function SpeedUp(dir) {
        var rotator = window["<%= thumbRotator.ClientID %>"];
        rotator.Freeze();
        rotator.StopRotator();
        rotator.StartRotator();
        for (i = 10; i > 0; i--)
            if (dir == "left")
            rotator.ScrollLeftNextFrame();
        else
            rotator.ScrollRightNextFrame();
    }
    function SlowDown(dir) {
        var rotator = window["<%= thumbRotator.ClientID %>"];
        rotator.Freeze();
        rotator.StopRotator();
        canStart = true;
        window.setTimeout(function() { ChangeDirection(dir); }, 100);
    }
</script>

this is the aspx.cs code:

#region Inicializa Scripts
     // -----------------------------------------------------------------------------
     // <summary>
     //     inicializa scripts na tela
     // </summary>
     // <history>
     //      [tgerevini] 06/10/2010  Created
     // </history>
     // -----------------------------------------------------------------------------
     private void InicializaScripts()
     {
         img_right.Attributes.Add("onclick", "javascript:ChangeDirection('left')");
         img_left.Attributes.Add("onclick", "javascript:ChangeDirection('right')");
         img_right.Attributes.Add("onmouseout", "javascript:FreezeRotator()");
         img_left.Attributes.Add("onmouseout", "javascript:FreezeRotator()");
         img_right.Attributes.Add("onmousedown", "javascript:FreezeRotator()");
         img_left.Attributes.Add("onmousedown", "javascript:FreezeRotator()");
         img_right.Attributes.Add("onmouseup", "javascript:SlowDown('left')");
         img_left.Attributes.Add("onmouseup", "javascript:SlowDown('right')");
     }
     #endregion

I need the rotator to move only three frames for each click event, is there any way how to set the number of frames to move?



Thanks
Tiago Gerevini

 

 

 

 

 

[Fiko]

Hello Tiago,

You can set an integer value to the FramesToShow property of the control and optionally specify the ScrollDirection. Please note that, however, the FramesToShow property affects the behavior of the control only when the TransitionType="Scroll" is set. This TransitionType, however, does not allow custom scrolling, so you cannot use the buttons in order to scroll the rotator items. This is why, I strongly recommend you to update to the recent AJAX version of the controls - RadControls for ASP.NET AJAX Q2 2010 SP2 in order to achieve the desired features.

Best wishes,
Fiko
the Telerik team