set_currentItemIndex and CrossFade Empty Frame

[Kevin Kembel]

I implemented a slideshow:

<telerik:RadRotator ID="radSlideShow" runat="server" DataSourceID="xmlSlideShowSource"
    Width="516px" Height="310px" ItemWidth="516px" ItemHeight="310px"
    RotatorType="SlideShow" FrameDuration='<%$ AppSettings:SlideShowFrameDuration %>'
    OnClientItemShown="radSlideShow_OnClientItemShown"
    OnClientLoad="radSlideShow_OnClientLoad">
    <SlideShowAnimation Duration='<%$ AppSettings:SlideShowFadeDuration %>' Type="CrossFade" />
    <ItemTemplate>
        <a href='<%# XPath("href") %>'>
            <img src='<%# System.Configuration.ConfigurationManager.AppSettings("SlideShowImagesRelativePath") + XPath("filename") %>' alt='<%# XPath("description") %>' % style="border-width: 0px;" />
        </a>
    </ItemTemplate>
</telerik:RadRotator>

And it transitions nicely from frame to frame without any problems.  But, I also included a custom navigation control that uses the clientside API to change the current visible frame by the index.

function showItemByIndex(index) {
    /* Be sure the slideShow RadRotator object is assigned */
    if (slideShow == null) return;

    /* Set the current frame index, 'false' to disable animation */
    slideShow.set_currentItemIndex(index, false);

    /* Reset the slideshow's timer, so that it doesn't just quickly change */
    slideShow.stop();
    slideShow.start();

    /* Set the CSS of the button that the user clicked on */
    setButtonByIndex(index);
}

The code appears to be working, except that whatever the previous slide was that was animated, it is not visible to go back to.  For example, assume three slides:

Page is loaded
Slide[0] is displayed
Slide[0] fades out, as Slide[1] fades in
User clicks on NavigationButton[0]
"showItemByIndex(0)" is executed
RadRotator sets the current item index to 0
Slide[0] is still faded out, and a blank frame is displayed

In my tests, the previous frame is always invisible because it was faded out.  I hope I explained this well enough.  I used "Fade" instead of "CrossFade" for an animation, and it works fine, so I've implemented that although I prefer the cross fade.

[Slav]

Hello Kevin,

Thank you for the provided code snippet. There is a bug with the rotator control, which occurs when the RotatorType property is set to SlideShow, with CrossFade animation, and the client method set_currentItemIndex is used to set the current item. This issue is already logged and will be addressed by our developers, although I cannot provide a firm estimate when a fix will be available. You can follow the PITS Issue by this link: Public URL.

For the time being I would suggest changing the RotatorType of your RadRotator to Fade, which will remove the problem. Please excuse us for the temporal inconvenience.

Don't hesitate to contact us again if you encounter additional problems.

Regards,
Slav
the Telerik team

[Ryan Eaves]

I can't call this fully tested, but I used this code to ensure the opacity is set after setting the index and so far it looks pretty good:

var rotFeaturedImages = $find(rotatorId);
$(rotFeaturedImages.get_currentItem().get_element()).css({ 'opacity': '1' });

I just call that right after I set the index. Hope that helps!

[Slav]

Hi Ryan,

Indeed, this fix will ensure that the opacity of the selected item is set to 1, although there are still some cases, in which the RadRotator's item will not be displayed. The safest solution is to use Fade SlideShowAnimation for such scenarios until the issue is resolved.

Kind regards,
Slav
the Telerik team