Size problems

[Lautaro]

Is it correct that all images being rotated need to be the same size?

Im trying to rotate a set of banners that are almost the same size but not exactly. the effect i get is

*some images get chopped of and the worst is that the chopped of part is shown in the beginning of the next image!

*there is a delay between images when nothing is shown.

Here is my code:

CSS:
.banner
{
  border:blue 1px solid;
    overflow: hidden;
    height: 320px;
    width: 920px;
    margin: 9px 9px 9px 11px;
}


aspx:

             <telerik:RadRotator ID="radrotBanners" Width="923" Height="325" runat="server" CssClass="banner"

                                     SlideShowAnimation-Type="CrossFade"
                      SlideShowAnimation-Duration="100"
                        FrameDuration="5000"
                  InitialItemIndex="1"
                   PauseOnMouseOver="false"
                    RotatorType="SlideShow"
                     ItemHeight="320"
                      ItemWidth="920"
                >
                <ItemTemplate>


                    <asp:Image ID="imgBanner"   CssClass="banner" ImageUrl='<%# Eval("url") %>' runat="server" />
                </ItemTemplate>
                </telerik:RadRotator>

[Fiko]

Hello Lautar ,

The items in the rotator's ItemTemplate should have equal size in order to control to work properly. This is by design and cannot be changed. I recommend you to check this KB article for more information about how to configure RadRotator control.

Kind regards,
Fiko
the Telerik team

[Lautaro]

Great!

Then i know RadRotator is not usable in my case.

Does RadControls have anyhing else i can use to get the following

*i supply a list of urls to banners
*the banner are faded in and out in the same asp:image control
*it can be in order or random
*fade speed and duration of each banner must be adjustable.

Thank you for your time!

[Fiko]

Hello Lautaro,

The RadRotator control is the most appropriate control for your scenario. In your case I recommend you to set the RadRotator's WIdth, ItemWidth, Height and ItemHeight properties according to the size of the biggest image. In this case you will be able to show images with different size using RadRotator contro.

This is an example setup, where the biggest image has size 400x400:

<telerik:RadRotator ID="RadRotator1" runat="server" Width="400" ItemWidth="400" Height="400"
    ItemHeight="400" DataSourceID="XmlDataSource1" RotatorType="SlideShow">
    <ItemTemplate>
        <%-- Set the div's size to the size of the biggest image --%>
        <div style="width: 400px; height: 400px; margin: 0; padding: 0;">
            <%--Images size should be smaller than or equal to the size set to the div element --%>
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# XPath("ImageURL")%>' AlternateText="IMAGE" />
        </div>
    </ItemTemplate>
    <SlideShowAnimation Duration="3000" Type="Fade" />
</telerik:RadRotator>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Thumbs.xml"></asp:XmlDataSource>

I hope this helps.

Greetings,
Fiko
the Telerik team