IMAGE SLIDING USING AJAX & JAVA SCRIPT

Take one Image and two Ajax Slider extender controls and set TargetControlID and BoundControlID' textboxes.

The design script code looks like (Note: As all you smart people know that tags are not allowed in blogspot, the starting and ending tags are replaced by '(' , ')' correspondingly)

(img id="imgZoomTarget" src="images/no daughter.bmp"

style="position: absolute;top: 92px; left: 378px; height: 343px; width: 308px" /)

(form id="form1" runat="server")

(asp:ScriptManager ID="ScriptManager1" runat="server" /)

(asp:TextBox ID="Slider2" runat="server")(/asp:TextBox)

(asp:TextBox ID="Slider2_BoundControl" runat="server")(/asp:TextBox)

(asp:TextBox ID="Slider3" runat="server")(/asp:TextBox)

(asp:TextBox ID="Slider3_BoundControl" runat="server")(/asp:TextBox)

(cc1:SliderExtender ID="heightSlider" runat="server" BehaviorID="Slider2"

TargetControlID="Slider2" BoundControlID="Slider2_BoundControl" Orientation="Vertical"

EnableHandleAnimation="true" Minimum="10" /)

(cc1:SliderExtender ID="widthSlider" runat="server" BehaviorID="Slider3"

TargetControlID="Slider3" BoundControlID="Slider3_BoundControl" Orientation="Horizontal"

EnableHandleAnimation="true" Minimum="10" /)

And now add the following java script code in body tag:

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 ZoomControlWidth(eventArgs)

{

var currentlyZoomingControl =$get(controlID);

if( eventArgs.get_Value() == null)

return;

var newWidth = HundredPercentWidth * ( parseInt( eventArgs.get_Value() ) / 100 ) ;

currentlyZoomingControl.style.width = parseInt(newWidth) +"px";

currentlyZoomingControl = null;

}

function pageLoad(sender,e)

{

var sliderbehaviour = $find('Slider3');

sliderbehaviour.add_valueChanged(ZoomControlWidth);

sliderbehaviour = $find('Slider2');

sliderbehaviour.add_valueChanged(ZoomControlHeight);

sliderbehaviour = null;

}