サムネイルを拡大するonClick

Question

私は一連のサムネイルを表示してフルサイズで表示するための画像ライブラリを作成しようとしています。私はこの作業をすることができましたが、私がやったやり方では、たくさんの繰り返しコードが必要です。ここで私は、画像ごとに持っているものの一例である：すべてのサムネイルをされ、何が起こるかはかなり

スクリプト

function load1() { 
    document.getElementById('wup').src = document.getElementById('wop1').src 
      var myElement = document.querySelector("#wup"); 
      myElement.style.visibility = "visible"; 
      var myElementB = document.querySelector("button"); 
      myElementB.style.visibility = "visible"; 
      var myElementC = document.querySelector("#cover"); 
      myElementC.style.visibility = "visible"; 
    } 

は（かなり多くがあります）をクリックしたときに実行されるこれらの機能のいずれかを持っています。画面の中央に大きな画像が表示され、サムネイルがクリックされたときの画像のソースが表示されます。このメソッドは機能しますが、不要な繰り返しのような感じがたくさんあります。

同じことを行うための簡単で効率的な方法を：私は探しています何

。

ご協力いただければ幸いです。ありがとう。

Answer 1

各要素に対してこれを行う関数を作成するだけです。

function showLargeImage(thumbnail) { 
    document.getElementById('wup').src = thumbnail.src 
    document.querySelector("#wup").style.visibility = "visible"; 
    document.querySelector("button").style.visibility = "visible"; 
    document.querySelector("#cover").style.visibility = "visible"; 
} 

次に、各画像について、関数onclickを呼び出します。

<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>