RadRotator as Slideshow Issues

6 posts, 0 answers
  1. Cole
    Cole avatar
    20 posts
    Member since:
    Jun 2008

    Posted 02 Dec 2008 Link to this post

    Hey everyone,

    I was trying to use the RadRotator as a slideshow device.  It was going good, but I have a lot of trouble making the images line up 1 per "screen" if you will.  If I let it run as a "slideshow" without any buttons showing from the control for awhile, the images gradually get offset by 1-2 px which slowly builds up until 20-30px offset is appearing in each picture.  That is, i see 80% of 1 pic, 20 % of the next (or previous).  It appears as if there is a slight offset, maybe a double-> int loss of precision that is affecting layout.... has anyone encountered this before?   I find if I have the tool buttons visible, this error does not occur, but then the user has to click to move the images, which seems counter-productive to a "slide-show".  My sample is below... note that I have tweaked the width/height of my Rotator, the Item width/height and the actual width/height of the table that the rotator template uses and the offset issue always seems to occurr.

    Any input is appreciated.

    Thx,
    Rob



    Sample of my rotator:

        <telerik:RadRotator ID="SlideshowRotator" runat="server"
                    FrameDuration="3000" Skin="Web20" RotatorType="SlideShowButtons"
                    Width="520" Height="358" ItemWidth="480" ItemHeight="358"
                    ScrollDirection="Left,Right">
                            <ItemTemplate>
                            <table style="width:480px; height:356px; margin-bottom:2px;">
                                     <tr><td valign="middle" align="center"><img src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %>' alt='<%# DataBinder.Eval(Container.DataItem, "Title")%>'
                                        style='width:<%# DataBinder.Eval(Container.DataItem, "SlideshowWidth") %>px; height:<%# DataBinder.Eval(Container.DataItem, "SlideshowHeight") %>px;' /></td></tr>
                            </table>
                            </ItemTemplate>
                        </telerik:RadRotator>
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 08 Dec 2008 Link to this post

    Hello Robin,

    I see that you have set the rotator to SlideShowWithButtons - note that in this case the width of the rotator increases with 40px (20px for each button). I would suggest to set the ItemWidth of the rotator to the desired value and then set the Width property to the ItemWidth's value plus 40 pixels. This should ensure that the rotator will show only one full item at a time.

    I hope this helps. If you still experience problems, please open a support ticket and send me a small sample project where the problems can be reproduced - I will check it right away.


    All the best,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Saumitra
    Saumitra avatar
    2 posts
    Member since:
    Mar 2009

    Posted 23 Dec 2010 Link to this post

    Hi Georgi,

    I've been expeciencing the same issue as mentioned by Cole. I know that this is a very old thread. But since there was no reply from Cole, i do not know whether the solution provided by you worked in his case or not. In my case its still not working. Here is my UI code for RadRotator. Please let me know where am I going wrong:
    <telerik:RadRotator ID="imageRotator" runat="server" FrameDuration="5000" PauseOnMouseOver="False" 
    Skin="Sunset" ItemWidth="698" Width="738" Height="325">
     <ItemTemplate>
         <asp:Image ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Url") %>' ToolTip='<%# DataBinder.Eval(Container.DataItem, "ImageName") %>' Height="325px" Width="738px"/>
    </ItemTemplate>       
    </telerik:RadRotator>

    Thanks,
    Saumitra
  5. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 27 Dec 2010 Link to this post

    Hi Cole,

    I believe that this help article will be of help for you.

    Greetings,
    Fiko
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Sunny
    Sunny avatar
    1 posts
    Member since:
    Apr 2011

    Posted 11 Apr 2011 Link to this post

    We are running into a similar scenario to this. 
    We have the buttons separated out into their own table cells, but are having the problem where each item within the RadRotator after 2-3 rotations between all the content starts shifting to the left, they're not rotating all the way through.

    Our Rotator is reading from a SharePoint list, here's what we have set up.


    <table border="0" cellpadding="0" cellspacing="0"><br><span class="Apple-tab-span" style="white-space:pre">   </span><tr><br><span class="Apple-tab-span" style="white-space:pre">  </span><td valign="middle"><br><span class="Apple-tab-span" style="white-space:pre">  </span> <asp:Image ImageUrl="/PublishingImages/RotatorImages/rotatorBtnLeft.gif" ID="prevButton" AlternateText="Previous Slide" runat="Server" Height="34" Width="33" Style="border: 0px"/><br>    </td><br><span class="Apple-tab-span" style="white-space:pre">    </span><td valign="middle"><br><span class="Apple-tab-span" style="white-space:pre">  </span><telerik:RadRotator ID="RadRotator1" runat="server" <br><span class="Apple-tab-span" style="white-space:pre">    </span>DataSourceID="spdatasource1" ItemWidth="880px" <br><span class="Apple-tab-span" style="white-space:pre">    </span>Width="940px" Height="285px" <br><span class="Apple-tab-span" style="white-space:pre">  </span>ScrollDuration="500"  <br><span class="Apple-tab-span" style="white-space:pre"> </span>ItemHeight="285px" <br><span class="Apple-tab-span" style="white-space:pre">    </span>FrameDuration="1000" <br><span class="Apple-tab-span" style="white-space:pre">  </span>RotatorType="SlideShowButtons"  <br><span class="Apple-tab-span" style="white-space:pre">   </span>WrapFrames="true"><br><span class="Apple-tab-span" style="white-space:pre">       </span>    <ItemTemplate><br><span class="Apple-tab-span" style="white-space:pre">      </span>        <div><%# Eval("Content") %></div><br><span class="Apple-tab-span" style="white-space:pre">     </span>    </ItemTemplate><br><span class="Apple-tab-span" style="white-space:pre"> </span>    <span class="Apple-tab-span" style="white-space:pre">  </span><ControlButtons LeftButtonID="prevButton" RightButtonID="nextButton" /></telerik:RadRotator><br><span class="Apple-tab-span" style="white-space:pre">    </span>    <span class="Apple-tab-span" style="white-space:pre">  </span><br>    <SPWebControls:SPDataSource runat="server" ID="spdatasource1" DataSourceMode="List"   SelectCommand="<Query><Where><IsNotNull><FieldRef Name='Content' /></IsNotNull></Where></Query>"><br>    <SelectParameters><br>      <asp:Parameter Name="ListName" DefaultValue="HomePage Rotator" /><br>  <span class="Apple-tab-span" style="white-space:pre"> </span></SelectParameters><br>    </SPWebControls:SPDataSource> <br><span class="Apple-tab-span" style="white-space:pre">   </span></td><br><span class="Apple-tab-span" style="white-space:pre"> </span><td><br>    <span class="Apple-tab-span" style="white-space:pre">   </span>    <span class="Apple-tab-span" style="white-space:pre">  </span><asp:Image ImageUrl="/PublishingImages/RotatorImages/rotatorBtnRight.gif" ID="nextButton" AlternateText="Next Slide" runat="Server" Height="34" Width="31" Style="border: 0px"/><br><span class="Apple-tab-span" style="white-space:pre">  </span></td><br><span class="Apple-tab-span" style="white-space:pre"> </span></tr><br><span class="Apple-tab-span" style="white-space:pre"> </span><br><span class="Apple-tab-span" style="white-space:pre">    </span></table><br><div><br></div>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="middle">
    <asp:Image ImageUrl="/PublishingImages/RotatorImages/rotatorBtnLeft.gif" ID="prevButton" AlternateText="Previous Slide" runat="Server" Height="34" Width="33" Style="border: 0px"/>
        </td>
    <td valign="middle">
    <telerik:RadRotator ID="RadRotator1" runat="server" 
    DataSourceID="spdatasource1" ItemWidth="880px" 
    Width="940px" Height="285px" 
    ScrollDuration="500"  
    ItemHeight="285px" 
    FrameDuration="1000" 
    RotatorType="SlideShowButtons"  
    WrapFrames="true">
       <ItemTemplate>
           <div><%# Eval("Content") %></div>
       </ItemTemplate>
        <ControlButtons LeftButtonID="prevButton" RightButtonID="nextButton" /></telerik:RadRotator>
       
        <SPWebControls:SPDataSource runat="server" ID="spdatasource1" DataSourceMode="List"   SelectCommand="<Query><Where><IsNotNull><FieldRef Name='Content' /></IsNotNull></Where></Query>">
        <SelectParameters>
          <asp:Parameter Name="ListName" DefaultValue="HomePage Rotator" />
       </SelectParameters>
        </SPWebControls:SPDataSource> 
    </td>
    <td>
             <asp:Image ImageUrl="/PublishingImages/RotatorImages/rotatorBtnRight.gif" ID="nextButton" AlternateText="Next Slide" runat="Server" Height="34" Width="31" Style="border: 0px"/>
    </td>
    </tr>

    </table>



    The viewport is set to 940px and the width is set to 880px. Any thoughts?


  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 13 Apr 2011 Link to this post

    Hi Sunny,

    You are using external buttons and you do not need to account for them in the Rotator's Width declaration. In other words you need to set the Rotator's viewport to be exactly as big as the item you are going to show (880 pixels in your case). For more information refer to the following article: http://www.telerik.com/help/aspnet-ajax/rotator-configuration.html.



    Kind regards,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017