This is a migrated thread and some comments may be shown as answers.

Resize items effect

3 Answers 57 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Cristian
Top achievements
Rank 1
Cristian asked on 23 Nov 2012, 11:52 PM
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
 

3 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 28 Nov 2012, 08:11 AM
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
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.
0
Cristian
Top achievements
Rank 1
answered on 28 Nov 2012, 02:47 PM
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.
0
Slav
Telerik team
answered on 03 Dec 2012, 09:35 AM
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
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.
Tags
Rotator
Asked by
Cristian
Top achievements
Rank 1
Answers by
Slav
Telerik team
Cristian
Top achievements
Rank 1
Share this question
or