I am trying to create a image gallery, pretty simple, just shows one image with a next and previous button. I got everything working I am not sure though how to make the nodeValue a image? Here is my xml:
and here is my html/javascript
Thanks for the help!
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<pic>
<image>thumbnails/thn1.jpg</image>
</pic>
<pic>
<image>thumbnails/thn2.jpg</image>
</pic>
<pic>
<image>thumbnails/thn3.jpg</image>
</pic>
<pic>
<image>thumbnails/thn4.jpg</image>
</pic>
<pic>
<image>thumbnails/thn5.jpg</image>
</pic>
<pic>
<image>thumbnails/thn6.jpg</image>
</pic>
<pic>
<image>thumbnails/thn7.jpg</image>
</pic>
<pic>
<image>thumbnails/thn8.jpg</image>
</pic>
<pic>
<image>thumbnails/thn9.jpg</image>
</pic>
<pic>
<image>thumbnails/thn10.jpg</image>
</pic>
<pic>
<image>thumbnails/thn11.jpg</image>
</pic>
<pic>
<image>thumbnails/thn12.jpg</image>
</pic>
<pic>
<image>thumbnails/thn13.jpg</image>
</pic>
<pic>
<image>thumbnails/thn14.jpg</image>
</pic>
<pic>
<image>thumbnails/thn15.jpg</image>
</pic>
</images>
Code:
<html>
<head>
<script type="text/javascript">
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load("images.xml");
var x=xmlDoc.getElementsByTagName("pic");
i=0;
function next()
{
if (i<x.length)
{
i++;
display();
}
}
function previous()
{
if (i>0)
{
i--;
display();
}
}
function display()
{
picture=(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
document.getElementById("show").innerHTML="<img src='picture'></img>";
}
</script>
</head>
<body onload="display()">
<div id='show'>
</div>
<br />
<input type="button" onclick="previous()" value="previous" />
<input type="button" onclick="next()" value="next" />
</body>
</html>
