PDA

View Full Version : DOM-Scripted Image Gallery - Need Help Troubleshooting



wyclef
05-16-2006, 04:12 AM
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.



<!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>

jscheuer1
05-16-2006, 04:30 AM
This:


thumb.src = thumb.getAttribute("href").replace(".", "_thumb.");

should be:


thumb.src = thumb.getAttribute("href").replace(/\.([^\.]*)$/, "_thumb.$1");

With IE Mac though, it is hard to say. I don't have a Mac to test on and that browser is no longer supported by either the Apple or the MS folks.