Click on image to open larger version on the page

[mamarockstar]

I have a photography website where I'm displaying pictures. We have 6 different categories of pictures we take. On each of those pages, I would like some small thumbnails of 8 or 10 pictures. Then, when you click on a thumbnail, that picture will appear larger in it's own "box" or "frame" on the right hand side of the page.

Can I do this with Javascript? I'm fairly new with javascript.

Thanks for your help!

 

[theniteowl]

Wow! I really thought a bunch of people would jump at this and answer it for you.

Try something like this.
Put the javascript function in the head of your page.
The first image tag has the name tag "big" and defines the default image that will show up.

The second image tag shows it's own image but has an onclick event that calls the picchange function passing in the name of the image to change (big) and what picture to change it with.

I also do onmouseover to change the cursor to a hand to show that it is a clickable area.

It's about the simplest way of doing it. There is much more sophisticated code out there but this can get you started.


<img name="big" src="mydefaultimageinbigwindow.gif" width="172" height="152">
<img onmouseover="this.style.cursor='hand'" onclick="picchange('big','ImageIwanttoshowinbigwindow.jpg')" src="Mysmallimage.jpg" width="58" height="68" alt="Mysmallimage.jpg"></td>


<script language="javascript">
function picchange(imgname,imgsrc)
{
document

.src=imgsrc;
}
</script>


Paranoid? ME?? WHO WANTS TO KNOW????

 

[trollacious]

It sounds like you're setting aside an area on the page to display the larger photos. If so, this would work for that:

<td><img onclick="showlarge('image1large')" src="image1.jpg"></td><td><img onclick="showlarge('image2large')" src="image2.jpg"></td>

<div id="largeimage"></div>

var largeimage = document.getElementById('largeimage');
function showlarge(imgname)
{
var imgstring = '<img src="images/' + imgname + '.jpg">';
largeimage.innerHTML = imgstring;
}

Lee

 

[mamarockstar]

I feel like an idiot. Say my images are boy.jpg and girl.jpg. Where and how do I put the names in the code? I guess I'm a bit confused..........

Thank you for your help!

 

[theniteowl]

Sorry mamarockstar, I never got back to this thread.
In my example above where I have: mydefaultimageinbigwindow.gif
would be a default image you want to show in the larger area.

Where it says: src="Mysmallimage.jpg" is where you put the small version of the image you want to use and right before that where it says: 'ImageIwanttoshowinbigwindow.jpg'
is where you put the name of the image you want to show in the big window when someone clicks on the small image.



Paranoid? ME?? WHO WANTS TO KNOW????

 

[mamarockstar]

Thanks theniteowl,

After playing around with it, I think I got it (pretty much). I appreciate your help!

My site is:

http://www.solidrockphotos.com

Dennielle