Jaa

Implementing Image Zoom using MS Ajax Slider Control

  • Artikkeli

The MS Ajax Control Toolkit provides a lot of cool controls that we can use to implement nifty effects in our applications.

One of the controls we are gonna play with today is the Ajax Slider Control.

The Slider Control Provides a way for the user to measure arbitrary values and set them using a cool Slider.

The Slider control provides the value of the current Slide and lets you do stuff with it .

Some of the  *stuff* we will try today is to implement a Zoom feature for images .

The Slider control binds to an asp:textbox or an asp:label to show the current value of the Slide.

It would be great if you could associate the control with arbitrary HTML Elements and associate the slide with their properties.

You can do that  by changing the Code of the Slider Control by downloading the code from the CodePlex Website.

Today , I will not go into how you can change the control , we will talk about using the Base control to modify the Height and width of an image control

so that it looks like we are zooming into and out of an image using the Slider.

See Demo Here

Video: Implementing Image Zoom using MS Ajax Slider Control

 

So,lets stop talking and start coding .

1) we will need 2 sliders , one for height , one for width .

 <!-- The Slider to modify the height -->

 <ajaxToolkit:SliderExtender ID="heightSlider" runat="server" BehaviorID="Slider2"
 TargetControlID="Slider2" BoundControlID="Slider2_BoundControl" Orientation="Vertical"
EnableHandleAnimation="true" Minimum="10" />

 <!-- The Slider to modify the width-->
<ajaxToolkit:SliderExtender ID="widthSlider" runat="server" BehaviorID="Slider3"
TargetControlID="Slider3" BoundControlID="Slider3_BoundControl" Orientation="Horizontal"
EnableHandleAnimation="true" Minimum="10" />

 2) The TargetControlID refers to the textbox which will receive the changed value from the  Slider.

  Slider2 --> Height Changed Value

  Slider3 --> Width  Changed Value

 3) Hook the onValueChanged event of the Slider Control behaviour to these functions in the ASPX Page.

 <script language ="javascript">

    function pageLoad(sender,e)
   {
       var sliderbehaviour = $find('Slider3');
       sliderbehaviour.add_valueChanged(ZoomControlWidth);
       sliderbehaviour = $find('Slider2');
       sliderbehaviour.add_valueChanged(ZoomControlHeight);
       sliderbehaviour = null;
   }
           
</script>   

  4) The Image control is specified as a parameter to the  "ZoomControlHeight" and the "ZoomControlWidth" Javascript functions  .

  5) The javascript functions are as shown below.

 /********Global variables to specify the Scaling Height and Width**********/
var HundredPercentHeight = 800;
var HundredPercentWidth  = 800;
var controlID ="imgZoomTarget";

 //Function to Modify Height according to Slider Value
function ZoomControlHeight(eventArgs)
{
    var currentlyZoomingControl =$get(controlID);
    
    //Calculate the new height 
    var newHeight  = HundredPercentHeight * (  parseInt( eventArgs.get_Value() ) / 100 ) ;
    //Assign the New Height
    currentlyZoomingControl.style.height = parseInt(newHeight) +"px";
    //Let go of the Control Reference
    currentlyZoomingControl = null;
    
}

 //Function to Modify Width according to Slider Value
function ZoomControlWidth(eventArgs)
{
    var currentlyZoomingControl =$get(controlID);
    //Calculate the new width
    if( eventArgs.get_Value() == null)
    return;
    var newWidth   = HundredPercentWidth  * ( parseInt( eventArgs.get_Value() ) / 100 ) ;
    //Assign the New Width
    currentlyZoomingControl.style.width  =  parseInt(newWidth) +"px";
    //Let go of the Control Reference
    currentlyZoomingControl = null;
}

 6) The <Img> tag that will be modified by the slider, is ...

 <img id="imgZoomTarget" src="thumbNails/001_by_Frnak.jpg" 

          style="position: absolute;top: 10px; left: 220px; height: 100px; width: 100px" />

 7).csharpcode, .csharpcode pre
{
   font-size: small;
   color: black;
   font-family: consolas, "Courier New", courier, monospace;
   background-color: #ffffff;
  /*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
   background-color: #f4f4f4;
  width: 100%;
    margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 7) This is how the page looks after we are done

Comments

  • Anonymous
    February 13, 2007
    You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Anonymous
    February 15, 2007
    Does this work well cross-browser/cross-platform?

  • Anonymous
    February 15, 2007
    Hey Mike , The supported browsers are IE6 and 7, Firefox 1.5 and higher, Opera 9 and higher and Safari 2.0 and higher.. Thanks, Raj

  • Anonymous
    April 16, 2007
    Thanks man. I spent almost 3 days and finally I've got it. You are great. Thanks again.

  • Anonymous
    October 09, 2007
    Hi Phani,  How do we associate the textbox .I am getting an javscript error thrown when i associate .I am just an entry level programmer can u help me with some more basic parts of code

  • Anonymous
    October 11, 2007
    Bravo, it really help and useful!

  • Anonymous
    April 01, 2008
    where can i get the slide bar control

  • Anonymous
    November 15, 2008
    Nice tutorial. But i am not able to excute the code (i am new to ajax). could you please send me the complete asp project for this tutorial. Email: hsalman01@yahoo.com thanks