Javascript图库-放大鼠标上的缩略图单击并隐藏其他缩略图

我正在用javascript制作一个图库，我的代码有问题。我有六个缩略图，我希望能够点击其中一个，并将其放大，同时隐藏其他缩略图，然后在再次点击时缩小。我发现了一种重复性很强的方法，但它只对其中一张照片有效，对其他照片无效，我不知道为什么

以下是我的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';
}

等所有六张照片，只是改变数字

和我的源代码，以使它大：

<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>

为他人等

为了让它再次变小

<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>

等等

请帮帮我！谢谢：）