Javascript gallery- Enlarge thumbnail on mouseclick and hide other thumbnails

Question

I'm making a gallery with javascript and I'm having trouble with my code. I have six thumbnails that I want to be able to click on one and have it enlarge while hiding the other thumbnails, and then to shrink back down when you click it again. I've found a rather repetitive way of doing it, but it only has worked for one of the photos and will not work for the others and I don't know why!

Here is my javascript:

function get_thumbs1() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('photo1a').style.visibility='hidden';
}
function get_big1() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('photo1a').style.visibility='visible';
}


function get_thumbs2() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('photo2a').style.visibility='hidden';
}
function get_big2() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('photo2a').style.visibility='visible';
}

etc for all six photos, just changing the numbers

And my source code to make it big:

<div id="thumbnailwrapper">
<a href="#" onMouseOver="hoverPhoto1()" onMouseOut="unHoverPhoto1()" onClick="get_big1()">  <div id="photo1"></div></a>
<a href="#" onMouseOver="hoverPhoto2()" onMouseOut="unHoverPhoto2()" onClick="get_big2()"><div id="photo2"></div></a>
</div>

etc for others

And to make it small again,

<div id="largeimage_wrapper">
<a href="#" onClick="get_thumbs1()"><div id="photo1a"></div></a>
<a href="#" onClick="get_thumbs2()"><div id="photo2a"></div></a>
</div>

etc.

Please help me! Thank you :)

Javascript gallery- Enlarge thumbnail on mouseclick and hide other thumbnails

0 Answers0