Image SlideShow In Ajax


Here we write a simple program of Image Slide Show In Ajax. In this program we take an Image Control (image1) and a TextBox Control (TextBox1). In this program we change the image according to the value of the TextBox. We can also set the display property none of the TextBox. Find the code for Image SlideShow In Ajax

Learn Image Slide Show In Ajax


Here we write a simple program of Image Slide Show In Ajax. In this program we take an Image Control (image1) and a TextBox Control (TextBox1). In this program we change the image according to the value of the TextBox. We can also set the display property none of the TextBox.
Step 1: First we take an Image(image1) and a TextBox (TextBox1):

Step2: Then we call the javascript function ImageRotator on the onload function in the tag
By which when the page loads this function will be call automatically.
Step3: Then we write the JavaScript Function:

function ImageRotator() {
xmlHttp = GetXmlHttpObject()
var url = "Default.aspx"
url = url + "?pname=" + document.getElementById('TextBox1').value
xmlHttp.onreadystatechange = stateChanged
xmlHttp.open("GET", url, true)
xmlHttp.send(null)
return false;
}


Step4: Now we Check the browser by this:

function GetXmlHttpObject() {
var objXMLHttp = null
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest()
}
else if (window.ActiveXObject) {
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

Step5: Now we set the TextBox value. We set it "1"


Step 6: Then we write the stateChanged fuction:

function stateChanged() {

if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
var str;
str = xmlHttp.responseText;
if (str == "1") {
document.getElementById("image1").src = "Image/1.jpg";
document.getElementById("TextBox1").value = "2";
setTimeout("ImageRotator()", 1000);
}
if (str == "2") {
document.getElementById("image1").src = "Image/2.jpg";
setTimeout("ImageRotator()", 1000);
document.getElementById("TextBox1").value = "1";
}
}
}


Here we set the source of the Image according to the TextBox value.

Step 7: In the Page_Load Event:

protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["fname"] != null)
{
string i = Request.QueryString["fname"].ToString();
string str = "1";
if (i == "2")
{
str = "2";
}
Response.Clear();
Response.Write(str);
Response.End();
}
}


Comments

Guest Author: Derex13 Jan 2012

That's not just logic. That's really insensible.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: