Slider with buttons

4 posts, 0 answers
  1. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 28 Mar 2012 Link to this post

    I wonder is it possible to create an image rotator for 4-6 images with the quick link buttons to each image similar to http://nivo.dev7studios.com/?

    Btw, what control did you use on http://www.telerik.com/ ?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Mar 2012 Link to this post

    Hi Miksh,

    You can achieve this by using RadRotator control. Here is the code which i tried by referring to this demo.

    ASPX:
    <telerik:RadRotator ID="RadRotator1" runat="server" Width="470px" Height="364" ItemWidth="470px" ItemHeight="230" ScrollDuration="500" RotatorType="Buttons" DataSourceID="SqlDataSource1" OnDataBound="RadRotator1_DataBound">
        <ItemTemplate>
         <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("Picture") %>' AutoAdjustImageControlSize="false" Width="90px" Height="110px" />
        </ItemTemplate>
        <ControlButtons LeftButtonID="leftArrow" RightButtonID="rightArrow" />
    </telerik:RadRotator>
    <asp:Panel ID="ButtonsContainer" runat="server">
    </asp:Panel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP(15) * FROM [Categories]">
    </asp:SqlDataSource>

    C#:
    protected void RadRotator1_DataBound(object sender, EventArgs e)
     {
      AddNavigationButtons();
     }
    private void AddNavigationButtons()
     {
      foreach (RadRotatorItem item in RadRotator1.Items)
       {
        ImageButton ImageButton = CreateLinkButton(item.Index);
        ButtonsContainer.Controls.Add(ImageButton);
       }
     }
    private ImageButton CreateLinkButton(int itemIndex)
     {
      ImageButton button = new ImageButton();
      button.ID = string.Format("Button{0}", itemIndex+" ");
      button.ImageUrl="Images/bullet5.jpg";
      button.OnClientClick = string.Format("showItemByIndex({0}); return false;", itemIndex);
      return button;
     }
    JS:
    <script type="text/javascript">
        var lastShownButton;
        function showItemByIndex(index)
         {
            var oRotator = $find("<%= RadRotator1.ClientID %>");
            oRotator.set_currentItemIndex(index);
            if (lastShownButton)
                lastShownButton.removeClass("btnHighlight");
            var currentButton = getButtonByIndex(index);
            currentButton.addClass("btnHighlight");
            lastShownButton = currentButton;
         }
        function OnClientItemShown(oRotator, args)
         {
            var currentIndex = args.get_item().get_index();
            if (lastShownButton)
                lastShownButton.removeClass("btnHighlight");
            var currentButton = getButtonByIndex(currentIndex);
            currentButton.addClass("btnHighlight");
            lastShownButton = currentButton;
         }
        function getButtonByIndex(index)
         {
            var buttonIdSelector = String.format("#Button{0}:first", index);
            var currentButton = $telerik.$(buttonIdSelector)
            return currentButton;
         }
    </script>

    Hope it helps,

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. miksh
    miksh avatar
    275 posts
    Member since:
    Nov 2006

    Posted 29 Mar 2012 Link to this post

    Thanks, I''l, try it out.
    Eventaully, I wish to have this option as an out-of-box rotator feature.
  5. Elvin
    Elvin avatar
    1 posts
    Member since:
    Aug 2012

    Posted 17 Sep 2013 Link to this post

    I followed your code but it doesn't seem to render the buttons. I'm not sure what's wrong.

    I also did a small modification the code by adding the Access method to get the buttonContainer control.

    See snippet below,

    protected virtual RadRotator RadRotator1
            {
                get
                {
                    return base.Container.GetControl<RadRotator>("RadRotator1", true);
                }
            }
     
            protected virtual Panel ButtonsContainer
            {
                get
                {
                    return base.Container.GetControl<Panel>("ButtonsContainer", true);
                }
            }
     
            protected void RadRotator1_DataBound(object sender, EventArgs e)
            {
                AddNavigationButtons();
            }
            private void AddNavigationButtons()
            {
     
                foreach (RadRotatorItem item in RadRotator1.Items)
                {
                    ImageButton ImageButton = CreateLinkButton(item.Index);
     
                    ButtonsContainer.Controls.Add(ImageButton);
     
                }
            }
            private ImageButton CreateLinkButton(int itemIndex)
            {
                ImageButton button = new ImageButton();
                button.ID = string.Format("Button{0}", itemIndex + " ");
                button.ImageUrl = "Images/bullet5.jpg";
                button.OnClientClick = string.Format("showItemByIndex({0}); return false;", itemIndex);
                return button;
            }


    This is my Rotator.acsx snippet

    <
    sf:RadRotator id="RadRotator1" runat="server" RotatorType="SlideShow">
     
            <ItemTemplate>
                <div>
                    <div>
                        <asp:Image runat="server" ID="newsImage" />
                    </div>
                    <div>
                        <asp:Label runat="server" ID="newsTitle" />
                        <asp:Label runat="server" ID="newsText" />
                        <asp:HyperLink runat="server" ID="newsLink"><span>Read more...</span></asp:HyperLink>
                    </div>
                </div>
            </ItemTemplate>
        </sf:RadRotator>
     
    <sf:RadRotator id="RadRotator1" runat="server" RotatorType="SlideShow">
     
            <ItemTemplate>
                <div>
                    <div>
                        <asp:Image runat="server" ID="newsImage" />
                    </div>
                    <div>
                        <asp:Label runat="server" ID="newsTitle" />
                        <asp:Label runat="server" ID="newsText" />
                        <asp:HyperLink runat="server" ID="newsLink"><span>Read more...</span></asp:HyperLink>
                    </div>
                </div>
            </ItemTemplate>
        </sf:RadRotator>
     
        <asp:Panel ID="ButtonsContainer" runat="server">
        </asp:Panel>
     
        <script type="text/javascript">
            var lastShownButton;
            function showItemByIndex(index) {
                var oRotator = $find("<%= RadRotator1.ClientID %>");
            oRotator.set_currentItemIndex(index);
            if (lastShownButton)
                lastShownButton.removeClass("btnHighlight");
            var currentButton = getButtonByIndex(index);
            currentButton.addClass("btnHighlight");
            lastShownButton = currentButton;
        }
        function OnClientItemShown(oRotator, args) {
            var currentIndex = args.get_item().get_index();
            if (lastShownButton)
                lastShownButton.removeClass("btnHighlight");
            var currentButton = getButtonByIndex(currentIndex);
            currentButton.addClass("btnHighlight");
            lastShownButton = currentButton;
        }
        function getButtonByIndex(index) {
            var buttonIdSelector = String.format("#Button{0}:first", index);
            var currentButton = $telerik.$(buttonIdSelector)
            return currentButton;
        }
    </script>
        <asp:Panel ID="ButtonsContainer" runat="server">
        </asp:Panel>
     
        <script type="text/javascript">
            var lastShownButton;
            function showItemByIndex(index) {
                var oRotator = $find("<%= RadRotator1.ClientID %>");
            oRotator.set_currentItemIndex(index);
            if (lastShownButton)
                lastShownButton.removeClass("btnHighlight");
            var currentButton = getButtonByIndex(index);
            currentButton.addClass("btnHighlight");
            lastShownButton = currentButton;
        }
        function OnClientItemShown(oRotator, args) {
            var currentIndex = args.get_item().get_index();
            if (lastShownButton)
                lastShownButton.removeClass("btnHighlight");
            var currentButton = getButtonByIndex(currentIndex);
            currentButton.addClass("btnHighlight");
            lastShownButton = currentButton;
        }
        function getButtonByIndex(index) {
            var buttonIdSelector = String.format("#Button{0}:first", index);
            var currentButton = $telerik.$(buttonIdSelector)
            return currentButton;
        }
    </script>

    Can anyone point me in the right direction?
Back to Top