set_currentItemIndex and CrossFade Empty Frame

4 posts, 0 answers
  1. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 11 Oct 2011 Link to this post

    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.

  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 14 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan Eaves
    Ryan Eaves avatar
    4 posts
    Member since:
    Mar 2006

    Posted 02 Mar 2012 Link to this post

    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!
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 07 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top