Making javascript work with lightbox - HTML Forums

kristy_lb · 10-24-2009, 10:47 AM

Hi Everyone,
I'm trying to program a product gallery (http://pearlpassion.ca/index.php?pag...arl-necklace-2)

When you first load the page, and click on click here to zoom in, lightbox functions properly in my placeholder image and text. When you click on any other image and then click here to zoom in, it's ignoring the rel="lightbox" tag that is supposed to be inserted by the javascript function. I can't figure out why, any insight would be appreciated though!
javascript:

Code:

<script  type="text/javascript">
// Gallery script.
// With image cross fade effect for those browsers that support it.
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
  var picture = document.getElementById(pictureName);
  if (picture.filters)
  {
    picture.style.filter="blendTrans(duration=1)";
    picture.filters.blendTrans.Apply();
  }
  picture.src = imageFile;
  if (picture.filters)
  {
    picture.filters.blendTrans.Play();
  }
  document.getElementById(titleCaption).innerHTML=captionText;
}
</script>

Image Gallery Code

HTML Code:

<div><img id="imggallery" src='{$firstimage}' style="max-width: 300px;" /><div id="zoom"><a href="{$firstimage}" rel="lightbox">Click Here to Zoom In</a></div><br /><br /></div>

<a href="javascript:void(0)" onclick="LoadGallery('imggallery', '{$firstimage}', 'zoom', '<a href=\'{$firstimage}\' rel=\'lightbox\'>Click Here to Zoom In</a>')"><img src="{$firstimage}" style="max-height: 35px;" /></a>
<a href="javascript:void(0)" onclick="LoadGallery('imggallery', '{$secondimage}', 'zoom', '<a href=\'{$secondimage}\' rel=\'lightbox\'>Click Here to Zoom In</a>')"><img src='{$secondimage}' style="max-height: 35px;" /></a>
<a href="javascript:void(0)" onclick="LoadGallery('imggallery', '{$thirdimage}', 'zoom', '<a href=\'{$thirdimage}\' rel=\'lightbox\'>Click Here to Zoom In</a>')"><img src='{$thirdimage}' style="max-height: 35px;" /></a>
<a href="javascript:void(0)" onclick="LoadGallery('imggallery', '{$fourthimage}', 'zoom', '<a href=\'{$fourthimage}\' rel=\'lightbox\'>Click Here to Zoom In</a>')"><img src='{$fourthimage}' style="max-height: 35px;" /></a>

It's being used within CMS Made Simple which is why it's all variables. Am I escaping the string wrong? I don't understand why it will link to the image properly when you click to zoom but then completely ignore the rel tag...