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

Creating a Thumbnail Slider

2 Answers 118 Views
Slider
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 2
Tim asked on 05 Jan 2009, 12:32 AM
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 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 06 Jan 2009, 11:53 AM
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.
0
Tim
Top achievements
Rank 2
answered on 06 Jan 2009, 11:18 PM

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!

Tags
Slider
Asked by
Tim
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Tim
Top achievements
Rank 2
Share this question
or