XML Transformation using Sarissa
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.
View the Simple XML Photo Gallery
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: