DOM-Scripted Image Gallery - Need Help Troubleshooting
Hi, I've got an image gallery that works fine in Firefox and Safari and ALMOST in IE 6 but it's totally inaccessible in Mac IE 5.2.3 and I would really like it to be a bit more functional in that browser. Can someone take a look and see if anything stands out? Thanks.
HTML Code:<!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=iso-8859-1" /> <title>Dom Gallery</title> <script type="text/javascript"> var initImageGallery = function () { var gallery = document.getElementById("imageGallery"); // var thumbs = document.getElementById("thumbs"); var imageList = document.getElementById("imageList"); // var view = document.getElementById("view"); var viewDesc = document.getElementById("viewDesc"); var viewImage = document.getElementById("viewImage"); var fullImage = document.createElement("img"); fullImage.setAttribute("id", "fullImage"); // nodes to be deleted array var delNodes = new Array(); for (var i=0; i<imageList.childNodes.length; i++) { var listNode = imageList.childNodes[i]; if (listNode.nodeName.toLowerCase() == "dt") { // link var thumb = listNode.firstChild; thumb.src = thumb.getAttribute("href").replace(".", "_thumb."); thumb.setAttribute("title", thumb.firstChild.nodeValue); // create desc dl thumb.desc = document.createElement("dl"); // thumb.dt = document.createElement("dt"); thumb.dt.appendChild(document.createTextNode(thumb.title)); thumb.desc.appendChild(thumb.dt); // add thumbnail image thumb.image = document.createElement("img"); thumb.image.className = "thumbnail"; thumb.image.setAttribute("src", thumb.src); thumb.image.setAttribute("title", thumb.title); thumb.image.setAttribute("alt", thumb.title); // replace link text with the image thumb.replaceChild(thumb.image, thumb.firstChild) thumb.onclick = function () { // there is no image in viewImage div if (!document.getElementById("fullImage")) { // then add fullImage there viewImage.appendChild(fullImage); } // change fullImages src and title fullImage.setAttribute("src", this.getAttribute("href")); fullImage.setAttribute("title", this.getAttribute("title")); // if description dl exists if (viewDesc.getElementsByTagName("dl").length != 0) { // remove it viewDesc.removeChild(viewDesc.getElementsByTagName("dl")[0]); } viewDesc.appendChild(this.desc); return false; }; } else if (listNode.nodeName.toLowerCase() == "dd") { // add dd's var tempNode = listNode.cloneNode(true); thumb.desc.appendChild(tempNode); // add listNode to the delNodes array // and remove it later delNodes.push(listNode); }; }; // remove nodes (dds from imageList dl) for (var k in delNodes) { imageList.removeChild(delNodes[k]); } // put the last image and descriptions in place thumb.onclick(); }; window.onload = function () { initImageGallery(); } </script> <style type="text/css"> * {margin: 0; padding: 0; border: none;} body { font-family:Arial, Helvetica, sans-serif; font-size:1em; background:#000; color:#9f9f9f;} #imageGallery {} #thumbs { width: 40%; float:left;} #thumbs dl { margin: 20px;} #thumbs dt {} #thumbs dd {display: none;} #thumbs .thumbnail { margin: 4px; padding:4px; background:#313133; float: left;} #view { width: 60%; float:left;} #viewDesc { } #viewDesc dl { margin: 20px;} #viewDesc dt { font-size:1.1em; font-weight:bold;} #viewDesc dd {} #viewImage { } #viewImage #fullImage { padding:15px; background:#313133;} h1 {margin: 20px; text-transform:uppercase; font-size:1.2em; color:#5cdd83;} </style> </head> <body> <div id="imageGallery"> <div id="thumbs"> <h1>Thumbnails</h1> <dl id="imageList"> <dt><a href="image001.jpg">Image 001</a></dt> <dd>Description of Image 001 1</dd> <dd>Description of Image 001 2</dd> <dd>Description of Image 001 3</dd> <dd>Description of Image 001 4</dd> <dt><a href="image002.jpg">Image 002</a></dt> <dd>Description of Image 002 1</dd> <dd>Description of Image 002 2</dd> <dt><a href="image001.jpg">Image 003</a></dt> <dd>Description of Image 003 1</dd> <dd>Description of Image 003 2</dd> <dd>Description of Image 003 3</dd> <dt><a href="image002.jpg">Image 004</a></dt> <dd>Description of Image 004 1</dd> </dl> </div> <div id="view"> <div id="viewDesc"> <h1>Title and description</h1> </div> <div id="viewImage"> <h1>Artwork</h1> </div> </div> </div> </body> </html>
CSS Codes
Reply With Quote
Bookmarks