Javascript simple gallery. Javascript guides, tutorials and help

Date Posted: Saturday 06th of February 2010 | Category: Javascript

Javascript simple gallery
I was looking for a really simple Javascript that would allow me to display a larger image on the same page, when the smaller image was clicked.

All the scripts where to complicated until I found this one below.

I forgot what site I found this on, but when I do I will give credit to it on this page. The script is very simple, just follow the instructions below.

You may also be able to replace onClick with onMouseover.

Place this part of the code in your head tags:

<script type="text/javascript">
function showPic(whichpic)
{
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("desc");
description.firstChild.nodeValue = text;
}
</script>

Place this part of your code inside the body, html tags.

<a href="img1_large.jpg" title="Img 1 Title" onClick="showPic(this); return false;"><img src="img_1_small.jpg" width=150 height=200 border=\"0\"></a>
<span class="text_regular_white" id="desc">Image Description</span>