Play, Pause, Step Forward, Step Backward

[Jason Heine]

Hello Telerik Community,

I am attempting to get the RadRotator to work with some Client API.

Everything works except there is a minor bug that I can't figure out what I am doing wrong.

I have the following Rotator Control:

<telerik:RadRotator runat="server" ID="imageSlider" RotatorType="AutomaticAdvance"
                        ScrollDirection="Left" FrameDuration="300" ScrollDuration="1" Width="640px" ItemWidth="640px"
                        Height="640px" ItemHeight="640px" PauseOnMouseOver="False"  OnClientLoad="onRotatorLoadHandler" >
                        <ItemTemplate>
                            <asp:Image ID="Image1" ImageUrl='<%# "~/" + Eval("Path") %>' runat="server" />
                        </ItemTemplate>
                    </telerik:RadRotator>

Now, i have the following buttons:

<table>
                        <tr>
                            <td>
                                <asp:ImageButton ID="cmdStepBack" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/first.png"
                                    OnClientClick="return stepBackward();" ToolTip="Step Backwards" />
                            </td>
                            <td>
                                <asp:ImageButton ID="cmdPause" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/pause.png"
                                    OnClientClick="return pauseRotator();" ToolTip="Pause Animation" />
                                <asp:ImageButton ID="cmdPlay" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/play.png"
                                    OnClientClick="return startRotator();" Style="display: none;" ToolTip="Play Animation" />
                            </td>
                            <td>
                                <asp:ImageButton ID="cmdStepForward" runat="server" ImageUrl="~/App_Themes/Default/Images/360Controls/last.png"
                                    OnClientClick="return stepForward();" ToolTip="Step Forward" />
                            </td>
                        </tr>
                    </table>

And finally, I have the following javascript:

<script language="javascript" type="text/javascript">
            var oRotator;
            function onRotatorLoadHandler(sender, args) {
                oRotator = sender;
            }

            function pauseRotator() {

                document.getElementById("cmdPause").style.display = "none";
                document.getElementById("cmdPlay").style.display = "";

                oRotator.pause();

                return false;
            }

            function startRotator() {

                document.getElementById("cmdPause").style.display = "";
                document.getElementById("cmdPlay").style.display = "none";

                oRotator.resume();
                return false;
            }

            function stepBackward() {
                oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
                pauseRotator();
                return false;
            }

            function stepForward() {
                oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
                pauseRotator();
                return false;
            }

        </script>

So, when I click on Play/Pause, it works just fine and dandy. No issues.

However, when I click on stepForward or stepBackward, I have to call showNext then pause the rotator in order for it to work (this is while the animation is going -- there is a different issue when i pause it).

When I pause the animation first, and then click on stepForward/Back it does not work at all.

If i don't pause the animation (while it is playing) after calling showNext it does not work.

Any thoughts how i can click on showNext(either direction) and have it pause the animation and step forward/back without jumping through hoops?

Thanks,

Jason

[Rumen]

Hello Jason,

I just added the start() method to the stepBackward and stepForward functions and this fixed the problem on my side:

function stepBackward() {
    oRotator.start();
    oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
    pauseRotator();
    return false;
}

function stepForward() {
    oRotator.start();
    oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
    pauseRotator();
    return false;
}

For your convenience I have attached my test project. You can also test by commenting out the pauseRotator() function in the stepBackward and stepForward functions.

Best regards,
Rumen
the Telerik team