Jump to content

Thumbnail Image Gallery


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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...