javascript - Javascript ギャラリー - マウスクリックでサムネイルを拡大し、他のサムネイルを非表示にします

Question

JavaScript でギャラリーを作成していますが、コードに問題があります。サムネイルが 6 つあり、そのうちの 1 つをクリックして拡大し、他のサムネイルを非表示にしてから、もう一度クリックすると元に戻ります。かなり反復的な方法を見つけましたが、それは写真の1つだけで機能し、他の写真では機能しません.理由はわかりません!

これが私の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';
}

など、6枚すべての写真について、番号を変更するだけです

そして、それを大きくするための私のソースコード:

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

等

私を助けてください！ありがとうございました ：）