DOM Scripted Image Gallery Help Troubleshooting Older Browsers
Hey, i've got this DOM Scripted Image Gallery built and it works fine in Firefox and Safari but has major accesibility problems in Mac IE 5.2.3 which i'd like to straighten out and some minor problems in IE 6 I can't pinpoint. If someone can take a look and see if anything stands out that would be great. Thx.
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 {}
#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="image003.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="image004.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>
