Javascript - Multiple Image Galleries on one page

javascript multiple galleries

[p4c199]

Hi,

This is probably easy to solve but am not so good javascript.

I am using a image gallery script from A List Apart. I would like to have multiple galleries on one page, but have not been able to achieve this.

Here is the javascript:
<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>

here is the HTML

<p id="desc">A bunch of bananas on a table</p>
<img alt="" src="images/1.jpg" id="placeholder" width=200px/>
</div>

<ul>
<li><a title="A bunch of bananas on a table" href="images/1.jpg" onclick="return showPic(this)">1</a></li>
<li><a title="Condiments in a Chinese restaurant" href="images/2.jpg" onclick="return showPic(this)">2</a></li>
<li><a title="Seashells on a table" href="images/3.jpg" onclick="return showPic(this)">3</a></li>
</ul>

Any help would be greatly appreciated.

Thank you in advance.

Ollie

[penders]

Currently your showPic() function targets just 1 placeholder - always the same placeholder. So, if you are going to have more than 1 you need some way to target the one you want. One way to do this would be to introduce an additional parameter to your showPic() function like 'whichplaceholder'...

function showPic (whichpic, whichplaceholder) { 
 var myplace = 'placeholder'+whichplaceholder; 
 var mydesc = 'desc'+whichplaceholder; 
 if (document.getElementById) {  
  document.getElementById(myplace).src = whichpic.href;  
  if (whichpic.title) {  
   document.getElementById(mydesc).childNodes[0].nodeValue = whichpic.title;  
  } else {  
   document.getElementById(mydesc).childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;  
  } 
  // Rest of function...

And mark up your HTML like so...

<p id="desc9">A bunch of bananas on a table</p>  
<img alt="" src="images/1.jpg" id="placeholder9" width=200px/>  
</div>

And call like so...

onclick="return showPic(this,9)"

(NB: untested)