Bir küçük resmi büyütmeTıklama

Question

Kullanıcının bir dizi küçük resmi görüntüleyebileceği ve bunları tam boyutta görüntülemek için üzerlerine tıklayabildiği bir tür resim kitaplığı oluşturmaya çalışıyorum. Bu işi yapmayı başarabildim ama yaptığım gibi birçok tekrarlı kod gerektiriyor.

komut

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"; 
    } 

Hemen hemen ne olur her küçük resim (oldukça çok vardır) tıklandığında çalışan bu işlevlerden birini olmasıdır: İşte her resim için ne bir örnektir. Ekranın merkezinde büyük bir görüntü oluşturur ve görüntünün kaynağı küçük resmin tıklandığı durumdur. Bu yöntem işe yarıyorsa, gereksiz tekrarlama gibi hissettiren bir sürü şey gerektirir.

aynı şeyi yapmak için basit ve etkili bir yol: Ben Aradıklarım

.

Herhangi bir yardım çok takdir edilecektir! Teşekkürler.

Answer 1

Her eleman için bunu yapan bir işlev oluşturun.

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"; 
} 

Ardından her görüntü için sadece onclick işlevini çağırın.

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