Jump to content

Thumbnail Image Gallery


hectorone

Recommended Posts

Hello all, I am trying to create a simply image gallery, with a big pic that sits above a line of thumbnails. I have a separate xml file that contains the url for the big pic, the url for the thumbnail and also an image caption. What I'd like to happen is when the page loads the javascript checks to see how many image nodes there are in the xml file and creates that many divs to hold the various thumbnails in. I can get the js to dynamically create the required number of divs to hold the thumbnails, but can't work out how to load the actual images into their holders. I'm sure that it's a simply line of code, but can't work it out! Any suggestions would be welcome. Here is what I've got so far. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title> <script type="text/javascript"> if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","gallery.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("image");i=0; function goDiv(id, html, width, height, left, top) { for (var i = 0; i<x.length;i++) { var newdiv = document.createElement("div"); newdiv.setAttribute("id",id); thumbsURL = (x.getElementsByTagName("thumbURL")[0].childNodes[0].nodeValue) newdiv.style.width = "200px";newdiv.style.height = "100px";newdiv.style.background = "#FFF";newdiv.style.border = "2px solid #333";newdiv.style.margin = "20px";newdiv.style.float = "left";newdiv.style.display = "block";newdiv.style.background-image = "url(" + thumbsURL + ")"; ??I tried to load the img here but with no luck document.body.appendChild(newdiv); } } </script></head> <input type="button" onclick="goDiv();" value="create thumbs" /></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...