Wednesday, March 31, 2010

Slideshow using Javascript

Slideshow using Javascript

This is a web application for displaying a slideshow using Asynchronous javascript and XML or AJAX, a simple SlideshowClient web application having next/previous manual image switching and normal Start/Stop slideshow options.This application basically using client side scripting using javascript and XMLHTTPRequest.Our ultimate aim is to show the images and switch them without posting the page back.So definitely we should use any client side scripting language for this asynchronous behavior and ofcourse javascript do the job.
If we are only using images, then we can directly change image control source within the javascript. But here we want some description or some display information for each image.So i choose a simple xml file to store the data required for the slideshow. I only added description here as informational data but we can add more details as per the requirement.
<?xml version="1.0" encoding="utf-8" ?>
<SlideshowClient>
<Slideshow>
<SlideshowId>1200</SlideshowId>
<ImagePath>/Images/IMG_1573.jpg</ImagePath>/>
<Description>Colors of Life</Description>
</Slideshow>
<Slideshow>
<SlideshowId>1201</SlideshowId>
<ImagePath>/Images/IMG_1209.jpg</ImagePath>/>
<Description>Leaf on the Floor</Description>
</Slideshow>
<Slideshow>
<SlideshowId>1202</SlideshowId>
<ImagePath>/Images/IMG_1229.jpg</ImagePath>/>
<Description>Street Light</Description>
</Slideshow>
<Slideshow>
<SlideshowId>1203</SlideshowId>
<ImagePath>/Images/IMG_1295.jpg</ImagePath>/>
<Description>Sunset</Description>
</Slideshow>
<Slideshow>
<SlideshowId>1204</SlideshowId>
<ImagePath>/Images/IMG_1201.jpg</ImagePath>/>
<Description>BackWater</Description>
</Slideshow>
</SlideshowClient>
In the web page i added some HTML controls required for the slideshow. So now comes the question. How it actually works? its not much complicated.I am using the hero XMLHttpRequest for getting the data from the server each time user interacts with the application.

//cross browser object for XMLHttpRequest
var xmlHttpRequest = (window.XMLHttpRequest) ? new window.XMLHttpRequest()
: new ActiveXObject('Microsoft.XMLHTTP');
xmlHttpRequest.open("GET", "/Data/SlideshowClientData.xml", false);
xmlHttpRequest.send(null);
//fetching the responseXML from the request
xmlDoc = xmlHttpRequest.responseXML;

We are fetching the response from responseXML attribute of the request object.So how we are going to parse this xml data? For parsing the xml data we use element.selectSingleNode("ElementName")and showing Next/Previous image and its description. But when i checked this behavior in different browsers i found this method is not supported in some browsers. So i tried for some workarounds and finally found Wrox's article
XPath support in Firefox. I added selectSingleNode prototype for Element for cross browser compatibility. If selectSingleNode method is not supported i am prototyping the method.

function ElementProtoType() {
if (document.implementation.hasFeature("XPath", "3.0")) {
//Some of the browsers not supporting selectSingleNode
Element.prototype.selectSingleNode = function(xPath) {
var evaluator = new XPathEvaluator();
var result = evaluator.evaluate(xPath, this, null,XPathResult.FIRST_ORDERED_NODE_TYPE, null);
if (result != null && result.singleNodeValue != null) {
result.singleNodeValue.nodeTypedValue = result.singleNodeValue.textContent;
return result.singleNodeValue;
}
else {
return null;
}
}
}
}

So now everything looks good and Next/previous will work in almost all browsers. So our basic logic for changing the image looks like,

function ShowNextImage() {
if (xmlDoc != null) {
var flag = false;
//Getting Previous image from data xml.
for (var i = 0; i < xmlDoc.documentElement.childNodes.length; i++) {
var element = xmlDoc.documentElement.childNodes[i];
if (element.nodeType == 1 && element.selectSingleNode("SlideshowId") != null &&
element.selectSingleNode("SlideshowId").nodeTypedValue == currentSlideshowId + 1) {
document.getElementById('slideshowimg').src = element.selectSingleNode("ImagePath").nodeTypedValue;
document.getElementById('description').innerHTML = element.selectSingleNode("Description").nodeTypedValue;
currentSlideshowId = currentSlideshowId + 1;
flag = true;
break;
}
}

if (!flag && interval != null && anchor != null) {
StopSlideshow(anchor);
}
}
}
I tested this application in almost all latest browsers including IE, Firefox, Google Chrome, Safari and it is working good.

PS : If we use larger size images adjust the timer according to the loading time for image otherwise in some browsers while playing the slideshow it wont get time to load the image and it'll only slide through the description.


Download Source Code,