Results 1 to 2 of 2

Thread: DOM-Scripted Image Gallery - Need Help Troubleshooting

  1. #1
    Join Date
    Nov 2005
    Posts
    26
    Thanks
    2
    Thanked 1 Time in 1 Post

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This:

    Code:
    thumb.src = thumb.getAttribute("href").replace(".", "_thumb.");
    should be:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •