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

Slider with buttons

3 Answers 82 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
miksh
Top achievements
Rank 1
Iron
miksh asked on 28 Mar 2012, 01:19 PM
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/ ?

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 29 Mar 2012, 08:37 AM
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.
0
miksh
Top achievements
Rank 1
Iron
answered on 29 Mar 2012, 01:21 PM
Thanks, I''l, try it out.
Eventaully, I wish to have this option as an out-of-box rotator feature.
0
Elvin
Top achievements
Rank 1
answered on 18 Sep 2013, 03:25 AM
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?
Tags
Rotator
Asked by
miksh
Top achievements
Rank 1
Iron
Answers by
Princy
Top achievements
Rank 1
miksh
Top achievements
Rank 1
Iron
Elvin
Top achievements
Rank 1
Share this question
or