DOM-Scripted Image Gallery

@wyclefMay 09.2006

~~[url]~~http://domscripting.com/domsters/photos.html[/url]

How can I modify this photo gallery script to accomodate a more detailed list and not just pull text from the title attribute?

to post a comment

JavaScript

35 Comments(s) _↴

@phpnoviceMay 09.2006 — #Create an array for your more detailed listing. Such an array may even contain HTML for your more detailed listing.

@wyclefauthorMay 10.2006 — #although I'm not sure how to proceed with the array idea, would this array be something that would degrade gracefully?

@phpnoviceMay 10.2006 — #No. It either works or it don't. Dynamically adding text under an image cannot be degraded to work at all if JavaScript isn't available. That's like saying, "Can a Flash movie be made to degrade gracefully if the visitor does not have Flash installed on their computer?" Not! ?

If you want something that will work without JavaScript, then you need to design a separate document for each image/text combination and have that load via hyperlink into an IFRAME.

@wyclefauthorMay 10.2006 — #That's fine. So back to the array concept. Could you help get me started with this? Also, would it be worthwhile to explore using Javascript to allow some basic HTML within the title attribute or is that totally pointless.

@VladdyMay 10.2006 — #Here is an example of an image gallery done in pure CSS.

http://demos.klproductions.com/sandbox/cssgallery.html

You can make it work in IE by adding a few lines of JScript behavior similar to the one explained here: http://www.vladdy.net/Demos/IEPseudoClassesFix.html

@phpnoviceMay 10.2006 — #... allow some basic HTML within the title attribute or is that totally pointless.[/QUOTE]
Yes, I said you would be able to do that from the beginning. So, just create the array with the same number of elements as you have thumbnail images:

var captionArray = new Array(
 "This is &lt;b&gt;caption&lt;/b&gt; #1.",
 "This is &lt;b&gt;caption&lt;/b&gt; #2.",
 "This is &lt;b&gt;caption&lt;/b&gt; #3."
 ); // no comma after last element above

You would use an HTML arrangement similar to the following for your large picture and caption:

&lt;div id="largeImage"&gt;&lt;/div&gt;
 &lt;div id="captionArea"&gt;&lt;/div&gt;

and, lastly, JavaScript such as the following in your thumbnails:

onclick="
 var str = '&lt;img src="...url..." alt="" border=0&gt;';
 document.getElementById('largeImage').innerHTML = str;
 document.getElementById('captionArea').innerHTML = captionArray[0];
 return true;"

And, of course, there are many ways to rearrange this to accomplish different purposes.

@wyclefauthorMay 10.2006 — #Vladdy. I am interested in your CSS Gallery. The only difference I think between the DOM-Scripted one and that one seems to be that in the DOM-Scripted one the images don't load until called upon where in your CSS one they have to load. I don't know how practical this would be for 25-50 images.

@wyclefauthorMay 10.2006 — #PHPNovice, do you think there would be a way to accomplish your solution without having the JS inline?

@phpnoviceMay 10.2006 — #Absolutely. Like I said, "...many ways to rearrange..." ?

@VladdyMay 10.2006 — #Here is a user friendly large image loading solution:

http://demos.klproductions.com/betas/klhidil/klhidilbeta.html

@wyclefauthorMay 10.2006 — #That's interesting. I could definitely use that for other things but for this I think the issue I was referring to was not that in the CSS version you posted, all of the images would have to load at once, whether it's a low rez file or a high rez file. With the DOM version I believe they are only loaded when called upon.

@slaughtersMay 10.2006 — #Here is an example of an image gallery done in pure CSS.

http://demos.klproductions.com/sandbox/cssgallery.html

You can make it work in IE by adding a few lines of JScript behavior similar to the one explained here: http://www.vladdy.net/Demos/IEPseudoClassesFix.html[/QUOTE]Pretty cool CSS example. I was real excited until I relealized I was using Firefox and it would not work in IE ?

Otherwise pretty neat ?

Question: Do you know which specific part of the CSS definition IE is having problems with?

@the_treeMay 10.2006 — #How can I modify this photo gallery script to accomodate a more detailed list and not just pull text from the title attribute?[/QUOTE]Assuming you're grabbing the location for the image from the href attribute of the anchor, why not grab the location for some text from the longdesc attribute of the image. That [i]is[/i] what it's there for afterall.

@VladdyMay 10.2006 — #The images would start loading after the page was loaded. I do not see how loading a large image upon request is any better or faster. With the hi-def image loading script that I referenced, you can use the same enlarged thumbnails by default and then load the hi-def images in the background.

Slaughters, I referenced a page that shows how with a few lines of JScript you can make it work in IE, I just did not bother implementing it for this example.

@phpnoviceMay 10.2006 — #Assuming you're grabbing the location for the image from the href attribute of the anchor, why not grab the location for some text from the longdesc attribute of the image.[/QUOTE]
Because you can't include HTML in the longdesc attribute.

@wyclefauthorMay 10.2006 — #woah, longdesc. it never even occured to me! i'm already grabbing the title from the title attribute so I suppose that could be a legit possibility. the tree, have you taken a look at the photo.js source of the original example I posted? I sure wish I came here first before starting this project...lots of good ideas!

@slaughtersMay 10.2006 — #Because you can't include HTML in the longdesc attribute.[/QUOTE]Isn't longdesc a URL?

Question: Does anyone know of a browser that actually supports longdesc?

@phpnoviceMay 10.2006 — #Actually, I've never worked with it. I was thinking of the alternate text attribute. So, perhaps my statement was incorrect. ?

@wyclefauthorMay 10.2006 — #wait, what attribute can you include HTML in? title?

@phpnoviceMay 10.2006 — #Isn't longdesc a URL?

Question: Does anyone know of a browser that actually supports longdesc?[/QUOTE]
Looks like IE6 supports it -- but only as a DHTML property (not an HTML attribute).

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/longdesc.asp

@wyclefauthorMay 11.2006 — #that's too bad. long desc sounded like a good idea.

@wyclefauthorMay 15.2006 — #This is what i've got currently. It works great in Firefox and Safari, is only slightly buggy in IE 6 and totally inaccessible in Mac IE 5.2.3. If someone could help me get this to work a little better in Mac IE 5.2.3 that would be great. I realize this is an ancient browser.

[code=html]
 <!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>
 [/code]

@wyclefauthorMay 16.2006 — #any ideas?

I've pinpointed that the following code is causing some kind of conflict. Haven't completely resolved the problem but making progress.

<i>
 </i>} 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);
 };

@wyclefauthorMay 17.2006 — #More specifically I think this line:

<i>
 </i>delNodes.push(listNode);

Does anyone have any insight why Mac IE 5.2.3 would be choking on this line and how I could fix it?

@wyclefauthorMay 17.2006 — #Apparently, push() isn't part of IE 5. Anyone suggest a workaround?

@phpnoviceMay 17.2006 — #If [b]delNodes[/b] is a standard array, then you can do this:

delNodes[delNodes.length] = listNode;

@wyclefauthorMay 17.2006 — #That seems to have the same effect as just removing that line altogether. Which has some positive effects, but there is still a minor issue with the way dd and dt elements are inputing the text. That line doesn't seem to make a difference if it's included or not in Firefox.

@phpnoviceMay 17.2006 — #No, that line by itself will make no difference. That is just saving node references in an array -- presumably for later reference and processing.

@wyclefauthorMay 17.2006 — #I see. Do you have any idea what would be causing the problem then?

@phpnoviceMay 17.2006 — #Put a unique alert message before each line in the function. See what is the last alert before an error is encountered -- at least, I presume you're getting an error message?

@wyclefauthorMay 18.2006 — #Ok, Mac IE 5.2.3 doesn't support the push() function hence, that line had to be changed to:

<i>
 </i>delNodes[delNodes.length]=listNode;

Like you said. This fixed that issue.

Now, what appears to be the FINAL problem has been narrowed down to this line:

<i>
 </i>thumb.replaceChild(thumb.image, thumb.firstChild);

Mac IE 5.2.3 does not like. If anyone has any ideas...

@phpnoviceMay 18.2006 — #According to the MSDN documentation, [URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/replacechild.asp]replaceChild()[/URL] was available on the MAC starting with IE v5. You could try using the IE-only [URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/replacenode.asp]replaceNode()[/URL] method. Otherwise, you can try a combination of a [URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertbefore.asp]insertBefore()[/URL] followed by a [URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/removechild.asp]removeChild()[/URL] or IE-only [URL=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/removenode.asp]removeNode()[/URL].

@wyclefauthorMay 18.2006 — #Thx. I'll look into that. This is starting to get a little discouraging.

@wyclefauthorMay 18.2006 — #Yea, I didn't have much luck with those. Perhaps there is no way?

@phpnoviceMay 18.2006 — #If those methods won't work for you, then [b]innerHTML[/b] is the fall-back way to do it.

Also in #JavaScript _↴

Is this possible Am i a function or a constructor?Dynamic Textbox resize

Success!

Help @wyclef spread the word by sharing this article on Twitter...

Tweet This

DOM-Scripted Image Gallery

35 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

DOM-Scripted Image Gallery

35 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

35 Comments(s) _↴

Also in #JavaScript _↴