PDA

View Full Version : image swap



froggy
12-07-2008, 04:07 PM
Hi all,

I have seen a website online and i would like to so a similar site for a portfolio.

It uses javascript so that when i user clicks on the thumbnail image it shows a large picture and text bellow. How does it work?

here is the site:-

http://www.electrickeries.com/

thank you

Snookerman
12-07-2008, 04:21 PM
I don't really see where on the site you found that, but here are a few examples that would do approximately what you wish for:

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/)

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm)

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm)

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm)

diltony
12-16-2008, 10:52 PM
It is just toggling of HTML codes really, whether with ajax or without depending on the amount of photos involved.

<table id="large" style="display:none">
<tr><td><img src="large"></td></tr>
<tr><td>My Photo</td></tr>
</table>

<img src="thumb" onclick="this.style.display='none';large.style.display='block';">