Creating a Thumbnail Slider

3 posts, 0 answers
  1. Tim
    Tim avatar
    5 posts
    Member since:
    Aug 2008

    Posted 04 Jan 2009 Link to this post

    Hello there

    I'm writing a site in VB.NET

    I'd like to add a product browser to my site like you guys use http://demos.telerik.com/aspnet-ajax/Controls/Examples/Default/DefaultVB.aspx.  I'm talking about the "What's Included" Thumbnail Slider.

    I have the code for your demo site on my machine.  I'm having trouble understanding how the slider on the ASPX page links to the html listing of links

    I found two settings of interest in the control

    OnClientLoaded="InitDemoSlider" 
    OnClientValueChanged="HandleClientValueChanged" 


    I beleive these are qsf.js scripts:


    // demo thumbnails slider

    function InitDemoSlider(sender, eventArgs)
    {
        var sliderId = sender.get_id();
        eval("initialValue_" + sliderId + " = sender.get_minimumValue();");
        
        HandleClientValueChange(sender, null);
    }

    function HandleClientValueChange(sender, eventArgs)
    {
        var sliderId = sender.get_id();
        
        var wrapper = document.getElementById(sliderId + "_wrapper");
        var content = document.getElementById(sliderId + "_content");

        var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();
        var change = sender.get_value() - oldValue;

        var contentWidth = content.scrollWidth - wrapper.offsetWidth;
        var calculatedChangeStep = contentWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());

        eval("initialValue_" + sliderId + " = initialValue_" + sliderId + " - change * calculatedChangeStep;");

        eval("content.style.left = initialValue_" + sliderId + " + 'px';");
        
        if (sender.get_value() == sender.get_minimumValue())
        {
            eval("content.style.left = 0;");
        }
    }

    Is there somewhere that more thoughly explains how I can adapt this great usage of the slider control?

    Cheers!

    Tim
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 06 Jan 2009 Link to this post

    Hello Tim,
    You are correct, you need the two functions from the qsf.js.

    The main idea behind the "What's Included" section is that you have two elements - DIV and UL. The DIV element plays the role of the visible viewport. When you move the slider, you change the position of the UL so that the correct part of it is displayed in the viewport, using content.style.left for the slider1_content.

    You can find another example of the use of RadSlider as a custom slider here.

    Best wishes,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tim
    Tim avatar
    5 posts
    Member since:
    Aug 2008

    Posted 06 Jan 2009 Link to this post

    Ah ok thanks!

    For everyone elses learning benefit I've edited the demo code slightly to support any page/div width to make it more portable into your application

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <style type="text/css">  
        .Content_Wrapper,.Boxes_Wrapper  
        {  
            overflow:hidden;  
            position:relative;  
            /* set width ! */  
        }  
        .Content,.Boxes_Content  
        {  
            position:absolute;  
            top:0;  
            left:0;  
        }  
          
        .Boxes{height:70px; background-color: #00FF00; max-width: 1000px;}  
        .Boxes_Wrapper{height:116px; white-space:nowrap; overflow:hidden;}  
        .Boxes_Wrapper img{display:inline}  
         
        </style> 
    </head> 
    <body class="BODY">  
        <script type="text/javascript">  
     
        var initialValue2;  
     
        function HandleClientLoaded2(sender, eventArgs)  
        {  
            initialValue2 = sender.get_minimumValue();  
            HandleClientValueChange2(sender, null);  
        }  
     
        function HandleClientValueChange2(sender, eventArgs)  
        {  
            var wrapperDiv = document.getElementById('boxes_wrapper');  
            var contentDiv = document.getElementById('boxes_content');  
              
            var oldValue = (eventArgs) ? eventArgs.get_oldValue() : sender.get_minimumValue();  
            var change = sender.get_value() - oldValue;  
              
            var contentDivcontentDivWidth = contentDiv.scrollWidth - wrapperDiv.offsetWidth;  
            var calculatedChangeStep = contentDivWidth / ((sender.get_maximumValue() - sender.get_minimumValue()) / sender.get_slideStep());  
              
            initialValue2initialValue2 = initialValue2 - change * calculatedChangeStep;  
              
            if (sender.get_value() == sender.get_minimumValue())  
            {  
                contentDiv.style.left = 0 + 'px';  
                initialValue2 = sender.get_minimumValue();  
            }  
            else  
            {  
                contentDiv.style.left = initialValue2 + 'px';  
            }  
        }  
        </script> 
        <form id="Form1" method="post" runat="server">  
            <asp:ScriptManager ID="ScriptManager" runat="server" /> 
            <div class="Boxes">  
            <div id="boxes_wrapper" class="Boxes_Wrapper">  
            <div id="boxes_content" class="Boxes_Content">  
                <!-- Pop a few 64x64 images in an images folder located in the same place this aspx file lives --> 
                <href="./Products.aspx?Category=1"><img src="images/product.gif" alt="ProductItem1" /> </a>
                <href="./Products.aspx?Category=2"><img src="images/product.gif" alt="ProductItem2" /> </a>
                <href="./Products.aspx?Category=3"><img src="images/product.gif" alt="ProductItem3" /> </a>
                <href="./Products.aspx?Category=4"><img src="images/product.gif" alt="ProductItem4" /> </a>
                <href="./Products.aspx?Category=5"><img src="images/product.gif" alt="ProductItem5" /> </a>
                <href="./Products.aspx?Category=6"><img src="images/product.gif" alt="ProductItem6" /> </a>
                <href="./Products.aspx?Category=7"><img src="images/product.gif" alt="ProductItem7" /> </a>
                <href="./Products.aspx?Category=8"><img src="images/product.gif" alt="ProductItem8" /> </a>
                <href="./Products.aspx?Category=9"><img src="images/product.gif" alt="ProductItem9" /> </a>
                <href="./Products.aspx?Category=10"><img src="images/product.gif" alt="ProductItem10" /> </a>
                <href="./Products.aspx?Category=11"><img src="images/product.gif" alt="ProductItem11" /> </a>
                <href="./Products.aspx?Category=12"><img src="images/product.gif" alt="ProductItem12" /> </a>
                <href="./Products.aspx?Category=13"><img src="images/product.gif" alt="ProductItem13" /> </a>
                <href="./Products.aspx?Category=14"><img src="images/product.gif" alt="ProductItem14" /> </a>
                <href="./Products.aspx?Category=15"><img src="images/product.gif" alt="ProductItem15" /> </a>
                <href="./Products.aspx?Category=16"><img src="images/product.gif" alt="ProductItem16" /> </a>
                <href="./Products.aspx?Category=17"><img src="images/product.gif" alt="ProductItem17" /> </a>
                <href="./Products.aspx?Category=18"><img src="images/product.gif" alt="ProductItem18" /> </a>
                <href="./Products.aspx?Category=19"><img src="images/product.gif" alt="ProductItem19" /> </a>
            </div> 
            </div> 
            </div> 
            <div style="background-color: #FF0000; width: 100%; max-width: 1000px;">  
            <telerik:RadSlider ID="RadSlider2" runat="server" 
                SlideStep="1" 
                Value="0" 
                Orientation="Horizontal" 
                OnClientValueChange="HandleClientValueChange2" 
                OnClientLoaded="HandleClientLoaded2" 
                Skin="Web20" /> 
            </div> 
        </form> 
    </body> 
    </html> 

    Thanks for your speedy help Telerik, as soon as my boss gets back to work I'm buying this product!

Back to Top