Resize items effect

[Cristian]

Hi guys, I have telerik RadControls for asp.net ajax Q1 2012, I'm implementing RadRotator as the main access menu of my application, for now everything is working fine, but there is something I can't achieve for now, in order to get a better "look and feel" to the rotator I want to implement the effect shown on your carousel sample:
http://demos.telerik.com/aspnet-ajax/rotator/examples/carouselmode/defaultcs.aspx
In wich the bike that is on front looks bigger than the rest of bikes and while rotating the items in the front gets bigger than the rest.

Hope you can help me.

Best regards.
Cristian
 

[Slav]

Hi Cristian,

You need to set the RadRotator property RotatorType to Carousel as noted in the linked online demo. Keep in mind that this rotator mode is designed for displaying a single image in every item.

You can also use the code from the example to configure the rotator.

Greetings,
Slav
the Telerik team

[Cristian]

This is the code for my RadRotator, is already set to carousel mode but it doesn't show the effect like the sample.

<telerik:RadRotator ID="RadRotator1" runat="server" Height="487px" Width="937px"
                                RotatorType="CarouselButtons" BorderStyle="None" Style="margin-right: 0px" FrameDuration="2500"
                                InitialItemIndex="3" >
                                <Items>
                                    <telerik:RadRotatorItem>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="imagen" runat="server" ImageUrl="~/img/1336657679_application-vnd.oasis.opendocument.spreadsheet-template.png"
                                                ToolTip="Reportes" OnClick="btnReportes_Click" />
                                            <asp:Label Text="      Reportes" runat="server" Font-Bold="True"
                                                Font-Size="Small" ForeColor="#333333" Font-Names="Arial"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:RadRotatorItem>
                                    <telerik:RadRotatorItem>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/img/IconSeguimiento.png"
                                                ToolTip="Seguimiento" OnClick="btnSeguimiento_Click" />
                                            <asp:Label ID="Label1" Text="      Seguimiento" runat="server"
                                                Font-Bold="True" Font-Size="Small" ForeColor="#333333" Font-Names="Arial"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:RadRotatorItem>



                                        <telerik:RadRotatorItem>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="imgMigrador" runat="server" ImageUrl="~/img/1340642938_New_Database.png"
                                                ToolTip="Seguimiento" OnClick="btnMigrador_Click" />
                                            <asp:Label ID="Label1" Text="        Migrador" runat="server"
                                                Font-Bold="True" Font-Size="Small" ForeColor="#333333" Font-Names="Arial"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:RadRotatorItem>


                                    <telerik:RadRotatorItem>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/img/1336615047_Program-Group.png"
                                                ToolTip="Catálogos" OnClick="btnCatalogos_Click" />
                                            <asp:Label Text="      Catálogos" runat="server" Font-Bold="True"
                                                Font-Size="Small" ForeColor="#333333" Font-Names="Arial"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:RadRotatorItem>
                                    <telerik:RadRotatorItem>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/img/IconProyectos.png"
                                                ToolTip="Proyectos" OnClick="btnProyectos_Click" />
                                            <asp:Label ID="Label2" Text="      Proyectos" runat="server"
                                                Font-Bold="True" Font-Size="Small" ForeColor="#333333" Font-Names="Arial"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:RadRotatorItem>
                                    <telerik:RadRotatorItem>
                                        <ItemTemplate>
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/img/Dashboard-icon.png"
                                                ToolTip="Dashboards" OnClick="btnDashboards_Click" />
                                            <asp:Label Text="     Dashboards" runat="server" Font-Bold="True"
                                                Font-Size="Small" ForeColor="#333333" Font-Names="Arial"></asp:Label>
                                        </ItemTemplate>
                                    </telerik:RadRotatorItem>
                                </Items>
                                <SlideShowAnimation Duration="5" />
                            </telerik:RadRotator>

Hope your help.

[Slav]

Hello Cristian,

Note that a CoverFlow RadRotator is designed for displaying a single image in every item as I mentioned in my previous post. The ImageButton control is rendered as an input element so you need to set its properties Width and Height to 100% if you want it to resize according to the rotator items. The resizing of a text is not supported in this mode. I would suggest embedding it in the images.

Greetings,
Slav
the Telerik team