...

View Full Version : DOM Scripted Photo Gallery



wyclef
05-09-2006, 05:46 AM
http://domscripting.com/domsters/photos.html

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

jscheuer1
05-10-2006, 06:41 AM
First of all, depending upon which browser you are using different things are happening with this page to begin with. Except for IE, virtually no browser will show the alt attribute of the thumbnails as a 'tooltip' when hovering over them. In a those browsers, the title attribute of the link will be shown. The alt attribute, according to specification, is only to be used if the picture is not loaded. OK, add to that the fact that even IE will not use the alt attribute of the thumbs, as a 'tooltip' if the the thumbs also have a title attribute, it will use the title attribute instead and that all browsers, including IE will use the title attribute of the thumbnail, if present, for the text displayed on hover of the thumbnail, even if the thumbnail's link also has a title attribute, with me so far? :)

Good, I thought so. To put this to some practical use, try modifying the HTML of one of the link/thumbnail pairs, say - the first one, which looks like so in the source:


<a href="images/photos/concert.jpg" title="The crowd goes wild">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" />
</a>

Change it to this, and see what happens when you hover the thumbnail and also what happens when you click on it:


<a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
</a>

wyclef
05-11-2006, 03:33 PM
ok. i THINK i'm following you so far. now what.

jscheuer1
05-11-2006, 04:03 PM
Do similar for each one and you are done.

wyclef
05-11-2006, 04:16 PM
Ok, i'm not sure we're on the same page. What is it you think i'm trying to do here?

wyclef
05-11-2006, 04:17 PM
Isn't there a way to take an Unordered List and have it be displayed underneath the title for each photo with different info for each one?

jscheuer1
05-11-2006, 05:39 PM
Ok, i'm not sure we're on the same page. What is it you think i'm trying to do here?

Have expanded text capabilities for display over the top of each of the large images, while still having the mouseover 'tooltip' of the thumbnails be a short or completely different string of text.

wyclef
05-11-2006, 05:49 PM
Not exactly. I'm less concerned with the mouseover tooltip of the thumbnails. I really want to be able to include an unordered list of details underneath the rendered title. I have no clue how to modify the photo.js source of the example posted to accomplish this.

jscheuer1
05-11-2006, 07:26 PM
Not much room for that in the current layout, try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Jay Skript And The Domsters: Photos</title>
<base href="http://domscripting.com/domsters/" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript">

var placeholderTopMargin="20px"; // set to space between thumbnails and large image
var descriptionHeight="175px"; // set to height for description area

function showPic(whichpic, num) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (typeof num=='number'&&document.getElementById('cdiv'+num)){
document.getElementById('description').innerHTML='<span> </span>'+document.getElementById('cdiv'+num).innerHTML;
}
else if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}

function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","images/placeholder.gif");
placeholder.setAttribute("alt","my image gallery");
placeholder.style.marginTop=placeholderTopMargin
var description = document.createElement("div");
description.style.height=descriptionHeight
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}

function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = new Function('return showPic(this, '+i+');')
}
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

</script>
</head>
<body>
<div id="header">
<img src="images/logo.gif" alt="Jay Skript and the Domsters" />
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>Photos of the band</h1>
<ul id="imagegallery">
<li>
<a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
</a>
</li>
<li>
<a href="images/photos/bassist.jpg" title="An atmospheric moment">
<img src="images/photos/thumbnail_bassist.jpg" alt="the bassist" />
</a>
</li>
<li>
<a href="images/photos/guitarist.jpg" title="Rocking out">
<img src="images/photos/thumbnail_guitarist.jpg" alt="the guitarist" />
</a>
</li>
<li>
<a href="images/photos/crowd.jpg" title="Encore! Encore!">
<img src="images/photos/thumbnail_crowd.jpg" alt="the audience" />
</a>
</li>
</ul>
</div>
<div style="display:none;">
<!-- Put your descriptions here -->
<div id="cdiv0">Whatever you like</div>
<div id="cdiv1"><div style="margin-left:50px;"><ul><li>Yo!<li>an<li>unordered<li>list!</ul></div></div>
<div id="cdiv2">Can be nothing, like the next one.</div>
<div id="cdiv3"></div>
<!-- End descriptions -->
</div>
</body>
</html>

wyclef
05-11-2006, 07:42 PM
maybe it's just one of those days but 'yo, an unordered list' is pretty funny today. :) This looks to be pretty decent at first glance, I can't really look at it much until tonight. I think my main concern with it would be accesibility. If you remove the styles it doesn't seem like the content descriptions correspond to their photos anymore. I think what would make this thing work is if the descriptions could be put right inside each list element. Like this...that way when the styles are removed it degrades in an understandable way...



<li>
<a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
<div id="cdiv0">Whatever you like</div>
</a>
</li>


The only problem is I don't think the W3C allows a DIV inside a list element. Thanks for your help on this.

jscheuer1
05-11-2006, 08:29 PM
Well, the style set for the element with the id of 'description' is the style that will affect the displayed content unless it is overridden or added to like I did with the left margin added to the unordered list. In the DOM, the large image and description area appear in the same locations as they did before, only their order is reversed.

wyclef
05-11-2006, 08:49 PM
so does this mean I can't put the description inside the list item for each element? or does that not make any sense?

jscheuer1
05-11-2006, 11:09 PM
Well, yes you can but, I'd think it would be easier to keep them all in one spot. You can do like so:


<li>
<a href="images/photos/concert.jpg" title="The crowd goes wild and a good time is had by all, we love you Bunky!">
<img src="images/photos/thumbnail_concert.jpg" alt="the band in concert" title="The crowd goes wild" />
</a>
<div class="desc" id="cdiv0">Whatever you like</div>
</li>

It will even validate with the current DOCTYPE but you will notice I've given it class="desc". The display must be none:


.desc {
display:none;
}

Now, please bear in mind what is happening here. The script creates a division with the id of 'description'. These other divisions that we are hardcoding into the HTML section are just data containers. It is the content of these divisions that gets inserted into the the description division, not these cdiv# divisions themselves. So, only style within the cdiv# divisions or set for the id 'description' will still apply once the content is made visible. Any style applied to the id's 'cdiv#' or the class 'desc' is destroyed in the translation. This is why we can set the style for 'desc' to display:none and still see the content once it is inserted into the description division.

wyclef
05-12-2006, 04:35 AM
I don't see how a div inside a list element will validate. Am I mistaken about this?

jscheuer1
05-12-2006, 05:04 AM
I ran it through the w3c validator and the only errors were no closing tags for the li's that I had added and erroneous ones for the script which I now have on the page. With the script returned to an external file (or commented out using the old fashioned <!-- script contents here // --> method as I did for this exercise) and adding </li> tags where required, the page passed the validator with flying colors. It would be useful to remember that a div is a basically meaningless element and can be placed within virtually any other. The anchor tag being the one exception I know of for sure, there may be others.

wyclef
05-12-2006, 03:22 PM
ah...I didn't catch those open list elements. ok, this is definitely closer to what i'm looking for. let me look it over some... thanks.

wyclef
05-16-2006, 04:57 AM
What do you think of this version? It's buggy in IE 6 and barely works in Mac IE 5.2.3.



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum