Log in

View Full Version : Loading Image from XML file


BioFUSION
07-02-2010, 08:56 PM
I have been using a flash file to read an xml file that reads the location of an image and displays it.

Here is an example of the XML file:


<?xml version="1.0" encoding="utf-8"?>
<icons>

<icon image="images/thmbs/set29.jpg" titre="Set 28" desc="POSTED 5-27-08"/>
<icon image="images/thmbs/set27.jpg" titre="Set 27" desc="POSTED 5-23-08"/>
<icon image="images/thmbs/set30.jpg" titre="Set 26" desc="POSTED 5-20-08"/>

</icons>

I am trying to move away from flash, and find a Jscript or Ajax solution to display the images from that same xml file.

Been playing with:
http://www.dynamicdrive.com/dynamicindex11/ajax.htm

But cannot get it to display anything, dunno what I am doing wrong.

Any help would be great.

To be clear, the goal is not to display the url of the image as text but to pull the url and put it into a div or img tag, but display the title/desc as text. Also want to be able to limit the number of nodes it loads, like do the first 4 or the first 8, that way I could have more then 8 nodes but it will only load the first 8 and stop.
jscheuer1
07-03-2010, 04:11 AM
If you are to use the:

http://www.dynamicdrive.com/dynamicindex11/ajax.htm

script as written, you need to change the icon tags to img tags:


<?xml version="1.0" encoding="utf-8"?>
<icons>

<img src="images/thmbs/set29.jpg" alt="Set 28" title="POSTED 5-27-08"/>
<img src="images/thmbs/set27.jpg" alt="Set 27" title="POSTED 5-23-08"/>
<img src="images/thmbs/set30.jpg" alt="Set 26" title="POSTED 5-20-08"/>

</icons>

Let's call that img.xml. And, to work locally, you need a slight modification to the script:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/******************************************
* Ajax load XML file script -- By Eddie Traversa (http://dhtmlnirvana.com/)
* Script featured on Dynamic Drive (http://www.dynamicdrive.com/)
* Keep this notice intact for use
******************************************/

function ajaxLoader(url,id)
{
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x)
{
x.onreadystatechange = function()
{
if (x.readyState == 4 && (x.status == 200 || !/^http/.test(location.href)))
{
el = document.getElementById(id);
el.innerHTML = x.responseText;
}
}
x.open("GET", url, true);
x.send(null);
}
}

</script>
</head>
<body onload="ajaxLoader('img.xml','contentLYR')">
<div id="contentLYR">
</div>
</body>
</html>

Here's a demo:

http://home.comcast.net/~jscheuer1/side/xml_img/

However, since you didn't give us the paths to the images, all you will see are the alt values.
vermaM
07-31-2011, 05:21 PM
In addition to this code, i want to populate each image into a HTML table into diffrent rows or may be diff <td> elements.
Right now, all image files are improting together.
I want to access them saparatly in HTML table.

How can i do that ?
Thanks in advance.

-MV