Thumbnail image display full image?

**jazzyanimator** · 07-16-2008, 08:20 PM

Hi,

I'm trying to find a way to have a mouse click of a thumbnail display the full size image of the thumbnail in a table I have assigned. Nothing elaborate I just need it to work.

My page I'm dealing with is here...

http://www.jazzyanimator.net/folio.html

If you view the source code you can see I have a table below the thumbnails where I want to have the thumbnails displayed.

**rangana** · 07-17-2008, 06:15 AM

1. Change this part in your markup:

Code:

<table width="1024" height="46" border="0" align="center">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

to:

Code:

<table style="width:1024px;height:46px;text-align:center;" border="0">
  <tr>
    <td id="rShow">&nbsp;</td>
  </tr>
</table>

2. Give you table that contains the picture a class name Rref:

Code:

<table width="200" border="0" align="left" class="Rref">
      <tr>
        <td><img src="folio/Indoor HD Render Test.jpg" alt="" width="145" height="81" /></td>
        <td><img src="folio/Ednor Road View.jpg" alt="" width="120" height="81" /></td>
        <td><img src="folio/hvbc_netrender_outside_2112.jpg" alt="" width="120" height="81" /></td>
        <td><img src="folio/Final Shot.jpg" alt="" width="127" height="82" /></td>
      </tr>
    </table>
	</td>
    <td><table width="200" border="0" align="right" class="Rref">
      <tr>
        <td><img src="folio/Kitch Night.jpg" alt="" width="128" height="86" /></td>
        <td><img src="folio/Liv Room Day.jpg" alt="" width="120" height="81" /></td>
        <td><img src="folio/Cloth Emerge.jpg" alt="" width="127" height="81" /></td>
      </tr>
    </table></td>

3. Remove the higlighted in your body tag:

Code:

<body onload="MM_preloadImages('portfolio-link (rollover).png','WIP-link (rollover).png','Contact-link (rollover).png','Resume-link (rollover).png','ChristianCG-link (rollover).png','images/portfolio-link (rollover).png','images/wip-link (rollover).png','images/contact-link (rollover).png','images/resume-link (rollover).png','images/christiancg-link (rollover).png','images/demo reels-link (rollover).png','images/portf-link-(rollover).png')">

4. Add this script:

Code:

window.onload=function()
{
MM_preloadImages('portfolio-link (rollover).png','WIP-link (rollover).png','Contact-link (rollover).png','Resume-link (rollover).png','ChristianCG-link (rollover).png','images/portfolio-link (rollover).png','images/wip-link (rollover).png','images/contact-link (rollover).png','images/resume-link (rollover).png','images/christiancg-link (rollover).png','images/demo reels-link (rollover).png','images/portf-link-(rollover).png');
for(var rAni=0,ref=document.getElementsByTagName('table');rAni<ref.length;rAni++)
	{
	if(ref[rAni].className=='Rref')
		{
		for(var i=0,rAnpic=document.getElementsByTagName('img');i<rAnpic.length;i++)
			{
			rAnpic[i].onclick=function()
				{
				document.getElementById('rShow').innerHTML='<img src="'+this.src+'" alt="myimage">';;
				}
			}
		}
	}
}

5. Have some beer.

P.S., fix your deprecated attributes.

Hope it helps.

Thread: Thumbnail image display full image?

Thread Tools

Search Thread

Thumbnail image display full image?

Bookmarks

Bookmarks

Posting Permissions