Thanks, I was able to get this working. However, it should be easier to combine effects via the properties, without all of this script. Otherwise, you're better off using the free jquery cycle plugin :)
Here's my solution:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Rotator.ascx.cs" Inherits="App_Custom_ControlTemplates_Callouts_Rotator" %>
<telerik:RadRotator ID="rotator1" runat="server" Width="240px" Height="104px" ScrollDuration="500"
FrameDuration='<%#FrameDuration%>' ItemWidth="200px" ItemHeight="104px" EnableAjaxSkinRendering="true"
EnableEmbeddedSkins="true" EnableViewState="true">
<ItemTemplate>
<div class="rotator-wrapper">
<strong class="title">
<%#Eval("Title")%></strong>
<br />
<%#Eval("Content")%>
</div>
</ItemTemplate>
</telerik:RadRotator>
<script type="text/javascript">
$(document).ready(
function() {
startRotator($find('<%= rotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);
$(".rrClipRegion").hover(
function() {
stopRotator($find('<%= rotator1.ClientID %>'));
},
function() {
startRotator($find('<%= rotator1.ClientID %>'), Telerik.Web.UI.RotatorScrollDirection.Left);
}
);
}
);
function startRotator(rotator, direction) {
if (!rotator.autoIntervalID) {
//refreshButtonsState(clickedButton, rotator);
rotator.autoIntervalID = window.setInterval(function() {
rotator.showNext(direction);
}, rotator.get_frameDuration());
}
}
function stopRotator(rotator) {
if (rotator.autoIntervalID) {
//refreshButtonsState(clickedButton, rotator)
window.clearInterval(rotator.autoIntervalID);
rotator.autoIntervalID = null;
}
}
function showNextItem(rotator, direction) {
rotator.showNext(direction);
//refreshButtonsState(clickedButton, rotator);
}
</script>