Slider with buttons

[miksh]

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/ ?

[Princy]

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.

[miksh]

Thanks, I''l, try it out.
Eventaully, I wish to have this option as an out-of-box rotator feature.

[Elvin]

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?