Displaying Pictures

[austastic]

Ok, I basically would like to build a list of pictures in xml, and then display them using html and maybe javascript? But I don't know how to set the src for html or css to reference the xml nodes. How would I do this?

[Ingolme]

You need javascript to work with XML, unless you use PHP.You need to have a defined structure decided before you read the XML file.Here's an example of how a gallery may be structured and read:images.xml:

<?xml version="1.0" encoding="UTF-8" ?><gallery>  <image>	<src>files/image1.jpg</src>	<title>Image 1</title>	<description>This is the first of a series of images</description>  </image>  <image>	<src>files/image2.jpg</src>	<title>Image 2</title>	<description>This is the second of a series of images</description>  </image></gallery>

java script:

// copy loadXMLDoc() from here: http://w3schools.com/dom/dom_loadxmldoc.aspfunction loadImages() {  xmlDoc = loadXMLDoc("images.xml");  images = xmlDoc.getElementsByTagName("image");  for(i=0;i<images.length;i++) {	D = document.createElement("div");	im = document.createElement("img");	im.src = images[i].getElementsByTagName("src")[0].firstChild.nodeValue;	im.alt = images[i].getElementsByTagName("title")[0].firstChild.nodeValue;	desc = document.createTextNode(images[i].getElementsByTagName("description")[0].firstChild.nodeValue);	D.appendChild(im);	D.appendChild(desc);	document.body.appendChild(D);  }}window.onload = loadImages;

[austastic]

Thank you so much!

[austastic]

Ok, I have another question. How do I reference the new src if I wanted to put it in a table? I can get it to return an HTML image object, but cannot get it to display the image. Here is how I have modified the code.

function loadImages() {  xmlDoc = loadXMLDoc("video_directory.xml");  images = xmlDoc.getElementsByTagName("video");	  document.write("<table>")  for(i=0;i<images.length;i++) {	D = document.createElement("div");	picture = document.createElement("img");	picture.src = images[i].getElementsByTagName("thumb_path")[0].firstChild.nodeValue;	picture.alt = images[i].getElementsByTagName("title")[0].firstChild.nodeValue;	desc = document.createTextNode(images[i].getElementsByTagName("description")[0].firstChild.nodeValue);		document.write("<tr>")	document.write("<td>")	document.write(picture.alt)	document.write("</td>")	document.write("<td>")	document.write(picture)	document.write("</td>")	document.write("</tr>")	D.appendChild(picture);	D.appendChild(desc);	document.body.appendChild(D);  }  document.write("</table>")}function poop() {}window.onload = loadImages;

[Ingolme]

You can't mix document.write() with DOM implementation...You'll have to create the table and all it's cells through DOM methods:

function loadImages() {  xmlDoc = loadXMLDoc("video_directory.xml");  images = xmlDoc.getElementsByTagName("video");  T = document.createElement("table");  for(i=0;i<images.length;i++) {	picture = document.createElement("img");	picture.src = images[i].getElementsByTagName("thumb_path")[0].firstChild.nodeValue;	picture.alt = images[i].getElementsByTagName("title")[0].firstChild.nodeValue;	desc = document.createTextNode(images[i].getElementsByTagName("description")[0].firstChild.nodeValue);	R = document.createElement("tr");	td1 = document.createElement("td");	td2 = document.createElement("td");	td1.appendChild(desc);	td2.appendChild(picture);	R.appendChild(td1);	R.appendChild(td2);	T.appendChild(R);  }  document.body.appendChild(T);}

[austastic]

Alright, now say that I wanted to make those pictures into links. How would I do that? I'm sorry about my ignorance, and I really have tried to figure out each of these things on my own, but seem to fail. Where in the code would I define the pictures as links, and how would I do that?

[Ingolme]

You'll need to create an A element, give it an href attribute and append it to the table cell after.That being said, you should take a look at the XML DOM tutorialHere's the portion of code for links:

  for(i=0;i<images.length;i++) {	picture = document.createElement("img");	picture.src = images[i].getElementsByTagName("thumb_path")[0].firstChild.nodeValue;	picture.alt = images[i].getElementsByTagName("title")[0].firstChild.nodeValue;	desc = document.createTextNode(images[i].getElementsByTagName("description")[0].firstChild.nodeValue);	R = document.createElement("tr");	td1 = document.createElement("td");	td2 = document.createElement("td");	link = document.createElement("a");	/* Put your URL here, if the URL depends	on the image you'll have to change your	XML document and extract the information	from it */	link.href = "http://www.mysite.com/folder/file.php";	link.appendChild(picture);	td1.appendChild(desc);	td2.appendChild(link);	R.appendChild(td1);	R.appendChild(td2);	T.appendChild(R);  }