two rotators, one page, eventually out of sync

[Randy Douglas]

I have two radrotators, a horizontal scroller with 4 images at the bottom, and a single 'main' image radrotator at the top. I have it set up to display the disappearing item in the bottom scroller to the main image section as it moves forward. Is it possible to have the main image radrotator change based on the index of the lower one while still using the 'slide show' or 'automatic advance' rotator type? Or running two rotators off the same timer would help. After a couple minutes they get out of sync. I set both rotators to have the same scrollduration and frameduration. If this is possible, can you please offer a sample. Thanks!

[Randy Douglas]

RotatorType="FromCode"
OnClientItemShowing="itemShowing_handler"

function itemShowing_handler(sender, args) {
    if (sender.isScrollingLeft() == true) {
        $find('<%= ActiveSlide.ClientID %>').showNext(Telerik.Web.UI.RotatorScrollDirection.Up);
    }
    else if (sender.isScrollingLeft() == false) {
        $find('<%= ActiveSlide.ClientID %>').showNext(Telerik.Web.UI.RotatorScrollDirection.Down);
    }
}

Figured it out. 

This worked for my previous and next buttons also.

 

 

 

[Randy Douglas]

This thread can be marked as answered.

[Dan]

Hi Randy,

I am looking to do exactly the same thing that you describe in this thread (i.e. a main image rotator with a multiple image rotator below it that are kept in sync).  I was wondering if you still had this code around and could provide me with a working sample?

Thanks in advance for your help.
Dan

[Randy Douglas]

Hi Dan,

Unfortunatly, I do not. I posted this long ago while working for a previous employer. Hopefully what I've already posted will help.

[Slav]

Hi Dan,

I have prepared a sample project that demonstrates the desired functionality. Overall, the following approach is used:

• Setup the main image rotator in FromCode mode (RotatorType="FromCode").
• Attach a handler to the OnClientItemShowing event of the multiple images rotator.
• Implement the handler as follows :

function OnClientItemShowing(sender, args) {
    var singleImageRotator = $find("<%= RadRotator1.ClientID %>");
    singleImageRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
}

Please use the attached example as a reference for incorporating this feature into your actual project.

Regards,
Slav
the Telerik team