Member Avatar for grabit

Hi Peoples
I have been cobbling together a simple JS/CF gallery page that shows the thumbs down the page (a block of5 lines of 3)AND when you click on a thumb it changes the placeholder image with the larger image of the thum clicked on.
My problem is that the large image opens up in a new page rather than on the gallery page.
I have a getElementById which should swap out my placeholder image in this line:

<td height="278" valign="top" align="right"><cfoutput><img id= "large" src="images/#getgallery.galleryImage#" width="#fullwidth#" > </cfoutput></td>

My function is as follws:

<script type="text/javascript" language="javascript"> 
function showPic (whichpic) { 
if (document.getElementById) { 
  document.getElementById('large') . 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>

and the onclick from the thumb image is:

<td width="75" align="center"><a onclick="return showpic(this)" href="images/#thisImage#" title="#thisdesc#"> 
                     <img src="Images/#galleryImage#" width="#thumbwidth#" border="0" id="thumb"></a></td>

Can anyone please help me to get this fixed

cheers and thanks in advance
Grabit

Thanks to you all

Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 2 Contributors
  • 1 Reply
  • 151 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

I think you should not use "anchor" tag because it does not act the way you want. What you may want is to use is a simple style for the table cell and move the "onclick" event to the table cell itself.

Also, you may consider passing the href & title in arguments format instead of leaving them inside an element.

<td width="75" style="text-align:center;cursor:hand;cursor:pointer" onclick="return showpic('images/#thisImage#', '#thisdesc#')" href="images/#thisImage#" title="#thisdesc#">
<img ...>
</td>

/*
Then change the showpic(obj) to showpic(href, title). After that of which.title to title and which.href to href instead
*/
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.