Implementing Image Zoom using MS Ajax Slider Control

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