Resize items effect

4 posts, 0 answers
  1. Cristian
    Cristian  avatar
    46 posts
    Member since:
    May 2011

    Posted 23 Nov 2012 Link to this post

    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
     
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 28 Nov 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cristian
    Cristian  avatar
    46 posts
    Member since:
    May 2011

    Posted 28 Nov 2012 Link to this post

    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.
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 03 Dec 2012 Link to this post

    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.
Back to Top