...

View Full Version : Javascript Thumbnail Gallery - Problems making it work with Mozilla & Netscape



rufus
09-19-2005, 08:12 PM
Hello, i hope someone can point me in the right direction here.

I'm creating a thumbnail gallery. Please see BETA version here > http://www.ljolly.com/Kilmartin%20Church%20Gallery.htm

Everything works the way i want it to using IE6, but when tested using Firefox and Netscape, everything but the image loading works. (the text description changes fine)

I based the script on what i found here http://www.alistapart.com/articles/imagegallery , but changed it so that the user clicks on a thumbnail instead of text.

On doing browser check within Dreamweaver, the following 3 main errors occur

1:The title attribute of the IMG tag is not supported
1:The onclick attribute of the IMG tag is not supported
1:The href attribute of the IMG tag is not supported

Can anyone suggest as to why it won't work in Firefox or Netscape?

Below is the code down to the first 3 thumbnails. I have highlighted the code i used from "A list apart"




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>06 Kilmartin Church</title>
<SCRIPT language=javascript type=text/javascript>
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</SCRIPT><style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.style2 {color: #FFFFFF}
.style3 {color: #000000}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>

<body>
<SCRIPT language=javascript type=text/javascript>
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</SCRIPT><p>&nbsp;</p>
<p>&nbsp;</p>
<table width="700" height="600" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="500" scope="col"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="50" colspan="2" class="style1" scope="col"><div align="left"></div></td>
</tr>
<tr>
<td width="250" height="20" class="style1" scope="col"><span class="style2">-<span class="style3">06</span></span> Kilmartin Church</td>
<td width="350" scope="col"><P class="style1" id=desc>Kilmartin Church - Gallery 06 of 10</P></td>
</tr>
<tr>
<td width="250" height="175" scope="col"><table width="148" height="338" border="0" align="left" cellpadding="0" cellspacing="4">
<tr>
<td width="40" height="40" scope="col"><img src="Kilmartin%20Church/Kilmartin-1T.jpg" width="40" height="40" title="Kilmartin 1" onclick="return showPic(this)" href="http://www.ljolly.com/Kilmartin Church/Kilmartin-1.jpg"></td>
<td width="40" height="40" scope="col"><img src="Kilmartin%20Church/Kilmartin-2T.jpg" width="40" height="40" title="Kilmartin 2" onclick="return showPic(this)" href="http://www.ljolly.com/Kilmartin Church/Kilmartin-2.jpg"></td>
<td width="40" height="40" scope="col"><img src="Kilmartin%20Church/Kilmartin-3T.jpg" width="40" height="40" title="Kilmartin 3" onclick="return showPic(this)" href="http://www.ljolly.com/Kilmartin Church/Kilmartin-3.jpg"></td>
</tr>

The script for the image placeholder is below and is contained further down the HTML (i didnt want to quote the entire html code for obvious reasons)



<IMG src="Kilmartin%20Church/blank.gif" alt="" id=placeholder></td>



Many thanks

Lewis

glenngv
09-20-2005, 04:35 AM
Why is showPic() function duplicate? Remove the other one.

Javacript:

function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

HTML:

<a href="Kilmartin Church/Kilmartin-5.jpg" onclick="return showPic(this)" title="Kilmartin 5"><img class="thumb" src="Kilmartin%20Church/Kilmartin-5T.jpg" alt="Kilmartin 5" /></a>

CSS:

a img {
border: none;
}
.thumb{
width:40px;
height:40px;
}

rufus
09-20-2005, 02:14 PM
@glenngv

Absolutely brilliant! Works cross browser with no browser check errors. I realized after i posted that it wasn't really to do with the javascript code, more of a (badly written!) HTML problem.

Thanks very much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum