myXMLProject » Javascript http://www.myxmlproject.com Just another WordPress weblog Sun, 05 Jun 2011 23:58:35 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 XML Transformation using Sarissa http://www.myxmlproject.com/xml-transformation-using-sarissa/ http://www.myxmlproject.com/xml-transformation-using-sarissa/#comments Thu, 12 Nov 2009 16:24:20 +0000 admin http://www.myxmlproject.com/?p=4 Sarissa was developed to allow cross-browser support for manipulating XML files.  This is important for web pages accessing XML with JavaScript.  Firefox, IE and Safari implementations of JavaScript each handle XML files differently. Sarissa is a set of downloadable JavaScript files that standardize XML manipulation.

PHOTO GALLERY USING XML

Several popular web based photo applications (Picasa and JAlbum) have export options that can generate XML files along with photo images to create a photo album in a web page. I have created a simple implementation that uses a similar approach. Sarissa methods parse the file: sherrypicsmenu.xml for image files and thumbnail files. HTML code is inserted into the web page to display a thumbnail bar, and detail photo images.

Here’s the XML file:

<?xml version="1.0" encoding="iso-8859-1"?>
<photogallery>
	<photo target="buttonarmsxdcat.jpg" image="armsxdcat.jpg"/>
	<photo target="buttoncatbasket.jpg" image="catbasket.jpg" />
	<photo target="buttondogsniff.jpg" image="dogsniff.jpg" />
	<photo target="buttonyawndog.jpg" image="yawndog.jpg" />
	<photo target="buttondbeagle.jpg" image="dbeagle.jpg"/>
</photogallery>

When the HTML page is loading, sherrypicsmenu.xml loads and is parsed. Each photo tag from the xml file becomes a thumbnail with a link to the full sized image.

Here’s the JavaScript:

<script type="text/javascript">
function initMenu(xmlFile) {
	var xml = Sarissa.getDomDocument();
	xml.async = false;
	xml.load(xmlFile);
 
	var nodes = xml.documentElement.childNodes;
	var output = '';
 
	for (var i = 0; i <= nodes.length - 1; i++) {
		if (nodes.item(i).nodeType != Node.ELEMENT_NODE) continue;
 
		output += '<div id="photobutton">';
		output += '<a onclick="showpicture(\'../images/' + nodes.item(i).getAttribute('image') + '\')">' +
			'<img src="../images/' + nodes.item(i).getAttribute('target') + '" />' + '</a><br />';
		output += '</div>';
 
	}
	document.getElementById('photomenu').innerHTML = output;
    showpicture("../images/catbasket.jpg");
}
 
window.onload = function() {
	initMenu('sherrypicsmenu.xml');
};
</script>





RELATED POSTS:

]]> http://www.myxmlproject.com/xml-transformation-using-sarissa/feed/ 0