hectorone Posted March 19, 2012 Share Posted March 19, 2012 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 More sharing options...
dsonesuk Posted March 19, 2012 Share Posted March 19, 2012 background-image should be backgroundImage, styling by javascript never uses hyphen but camelCase instead. 'background' for background color may need to be backgroundColor as well. Link to comment Share on other sites More sharing options...
hectorone Posted March 19, 2012 Author Share Posted March 19, 2012 Thanks for your help dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.