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>
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>
5 Answers, 1 is accepted
0
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.
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.
0
Saumitra
Top achievements
Rank 1
Rank 1
answered on 23 Dec 2010, 08:24 AM
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:
Thanks,
Saumitra
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
0
Hi Cole,
I believe that this help article will be of help for you.
Greetings,
Fiko
the Telerik team
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.
0
Sunny
Top achievements
Rank 1
Rank 1
answered on 12 Apr 2011, 12:38 AM
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">
<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?
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><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?
0
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.