How to crop and zoom image using RadSlider?

4 posts, 0 answers
  1. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 11 Mar 2009 Link to this post

    Hi Support Team,

    As I know, the Radslider have the function of zoom image (RadSlider for ASP.NET AJAX -> Functionality -> First Look).
    May I know got any function for zoom and crop image using RadSlider?

    Thanks.
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 12 Mar 2009 Link to this post

    Hello Jessie,

    RadSlider does not have such functionality (zooming / cropping) as this is out of the scope of the control. In the demo that you observed, the zooming was implemented with JavaScript. The RadSlider control itself simply provides the value that the customer has selected.


    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jessie
    Jessie avatar
    26 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2009 Link to this post

    Hi Georgi Tunev,

    Thanks for your information.

  5. Suresh K
    Suresh K avatar
    68 posts
    Member since:
    Apr 2009

    Posted 07 Sep 2009 Link to this post

    <head runat="server"
        <title>Zoom</title> 
        <telerik:RadCodeBlock ID="RadCodeBlock" runat="server"
        <script language="javascript" type="text/javascript"
       var nW,nH,oH,oW; 
    var zoomfactor=0.05; //Enter factor (0.05=5%) 
    var iwidth,iheight; 
    var orgwidth,orgheight; 
    function hload(sender,eventArgs) 
    iwidth = $get("ImageView").width; 
    iheight = $get("ImageView").height; 
    orgwidth=iwidth
    orgheight=iheight
    HandleValueChange(sender, eventArgs); 
    function zoom(iWideLarge,iHighLarge,whichImage) 
        $get("ImageView").width=iWideLarge
        $get("ImageView").height=iHighLarge
     
     
     function HandleValueChange(sender, eventArgs) 
                    {  
                   
                    if(sender.get_value()==0) 
                        { 
                        zoomfactor=-0.50;                     
                        iwidth=orgwidth
                        iheight=orgheight
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                        zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                       
                        if(sender.get_value()==1) 
                        { 
                         zoomfactor=-0.40; 
                         iwidth=orgwidth
                        iheight=orgheight;                     
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                        zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        if(sender.get_value()==2) 
                        { 
                         zoomfactor=-0.30; 
                         iwidth=orgwidth
                        iheight=orgheight;                    
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                        zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==3) 
                        { 
                         zoomfactor=-0.20; 
                         iwidth=orgwidth
                        iheight=orgheight;                 
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                        zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==4) 
                        { 
                         zoomfactor=-0.10; 
                         iwidth=orgwidth
                        iheight=orgheight;                     
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                        zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==5) 
                        { 
                        iwidth=orgwidth
                        iheight=orgheight;  
                        zoom(iwidth,iheight,iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==6) 
                        { 
                        zoomfactor=0.10; 
                        iwidth=orgwidth
                        iheight=orgheight
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                      zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==7) 
                        {    
                        zoomfactor=0.20; 
                         iwidth=orgwidth
                        iheight=orgheight
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                      zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==8) 
                        {     
                        zoomfactor=0.30; 
                        iwidth=orgwidth
                        iheight=orgheight
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                       zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==9) 
                        { 
                       zoomfactor=0.40; 
                        iwidth=orgwidth
                        iheight=orgheight
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                       zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                        else if (sender.get_value()==10) 
                        { 
                        zoomfactor=0.50; 
                         iwidth=orgwidth
                        iheight=orgheight
                        iwidth=parseInt(iwidth)+parseInt(iwidth)*zoomfactor; 
                        iheight=parseInt(iheight)+parseInt(iheight)*zoomfactor; 
                        zoom(iwidth,iheight,$get("ImageView")); 
                        } 
                         
                    } 
                     
        </script> 
        </telerik:RadCodeBlock> 
    </head> 
    <body style="text-align:center;"
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <br /> 
        <div> 
            <telerik:RadSlider ID="RadSlider1" runat="server" Skin="Hay" Style="position: static" Height="22px"  
             OnClientValueChange="HandleValueChange" 
                    OnClientLoaded="hload" 
            Width="200px" MaximumValue="10" Value="5">         
            </telerik:RadSlider> 
           <br /> 
            <asp:Image ID="ImageView" runat="server" ImageUrl="~/qsfWrap.jpg" Style="position: static" 
                Width="450px" /> 
        </div> 
        </form> 
    </body> 
    Hi.,
    I did Some Codeing to

    zoom image using RadSlider.

    i Hope this Help full to you   Default.aspx


Back to Top