I want to combine the FormCode and AutomaticAdvance rotator types

How can I create a rotator with "FormCode" mode while being able to start that rotator automatically when the page loads? In other words, to start the rotator automatically while enabling end user to stop/start/move next/move back.

I need a complete sample code for the call.

I've used the following JavaScript/JQuery code for FormCode management:

    <script type ="text/javascript">   

//

function

startRotator(clickedButton, rotator, direction)

{

if

(!rotator.autoIntervalID)

{

refreshButtonsState(clickedButton, rotator);

rotator.autoIntervalID = window.setInterval(

function

()

{

rotator.showNext(direction);

}, rotator.get_frameDuration());

}

}

function

stopRotator(clickedButton, rotator)

{

if

(rotator.autoIntervalID)

{

refreshButtonsState(clickedButton, rotator)

window.clearInterval(rotator.autoIntervalID);

rotator.autoIntervalID =

null }

}

function

showNextItem(clickedButton, rotator, direction)

{

rotator.showNext(direction);

refreshButtonsState(clickedButton, rotator);

}

// Refreshes the Stop and Start buttons

function

refreshButtonsState(clickedButton, rotator)

{

var

jQueryObject = $telerik.$;

var className = jQueryObject(clickedButton).attr("class"

);

switch

(className)

{

case "start"

:

{

// Start button is clicked

jQueryObject(clickedButton).removeClass();

jQueryObject(clickedButton).addClass(

"startSelected"

);

// Find the stop button. stopButton is a jQuery object

var stopButton = findSiblingButtonByClassName(clickedButton, "stopSelected"

);

if

(stopButton)

{

// Changes the image of the stop button

stopButton.removeClass();

stopButton.addClass(

"stop"

);

}

}

break

;

case "stop"

:

{

// Stop button is clicked

jQueryObject(clickedButton).removeClass();

jQueryObject(clickedBu开发者_如何学Ctton).addClass(

"stopSelected"

);

// Find the start button. startButton is a jQuery object

var startButton = findSiblingButtonByClassName(clickedButton, "startSelected"

);

if

(startButton)

{

// Changes the image of the start button

startButton.removeClass();

startButton.addClass(

"start"

);

}

}

break

;

}

}

// Finds a button by its className. Returns a jQuery object

function

findSiblingButtonByClassName(buttonInstance, className)

{

var

jQuery = $telerik.$;

var ulElement = jQuery(buttonInstance).parent().parent();

// get the UL element

var allLiElements = jQuery("li", ulElement);

// jQuery selector to find all LI elements

for (var

i = 0; i < allLiElements.length; i++)

{

var

currentLi = allLiElements[i];

var currentAnchor = jQuery("A:first", currentLi);

// Find the Anchor tag

if

(currentAnchor.hasClass(className))

{

return

currentAnchor;

}

}

}

//]]>

And the following code for the calls:

< 

a href="#" onclick="stopRotator(this, $find('<%= MyRotator.ClientID %>

')); return false;"

class="stopSelected" title="Stop">Stop

'), Telerik.Web.UI.RotatorScrollDirection.Left); return false;"

class="start" title="Start">Start However, I cannot start the rotator on the page load. Tried to use this code in the in the MyRotator_DataBoud event, but did not work either:

protected void rrMyRotator_DataBound(object sender, EventArgs  

e)

{

Page.RegisterClientScriptBlock(

"MyScript", " startRotator(this, $find('<%= MyRotator.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);" );

}

There are a couple of examples available in the Telerik online demos for this functionality and they have code you can use. See http://demos.telerik.com/aspnet-ajax/rotator/examples/clientapicontrol/defaultcs.aspx and http://demos.telerik.com/aspnet-ajax/button/examples/slideshow/defaultcs.aspx