Implementing Image Zoom using MS Ajax Slider Control

Implementing Image Zoom using MS Ajax Slider Control

  • Comments 8

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)
7) This is how the page looks after we are done
 
 
 
Leave a Comment
  • Please add 5 and 7 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Does this work well cross-browser/cross-platform?

  • 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

  • Thanks man. I spent almost 3 days and finally I've got it.

    You are great.

    Thanks again.

  • 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

  • Bravo, it really help and useful!

  • where can i get the slide bar control

  • 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

Page 1 of 1 (8 items)