自定義CSS/JavaScript燈箱

Question

我想創建自己的自定義CSS/JavaScript燈箱以在webste上顯示圖片。我知道有多個jQuery的可用燈箱，但我會喜歡這個工作。

請原諒內嵌的CSS，因爲我會將其移至外部樣式表。爲了便於使用，我將它保留在那裏，我將爲這兩個標籤創建類。 所以，問題是：我如何從每個標籤發送src到相應的#lightbox？

<article id="photos"> 
    <article style="max-width:900px; height:200px; position:relative;"> 
     <img src="<%response.Write(rs("genPic1"))%>" style="width:156px; height:104px; margin:0 25px 20px 5px; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic2"))%>" style="width:156px; height:104px; margin:0 25px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic3"))%>" style="width:156px; height:104px; margin:0 25px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic4"))%>" style="width:156px; height:104px;margin:0 25px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic5"))%>" style="width:156px; height:104px; margin:0 14px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic6"))%>" style="width:156px; height:104px; margin:0 25px 20px 5px; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic7"))%>" style="width:156px; height:104px; margin:0 25px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic8"))%>" style="width:156px; height:104px; margin:0 25px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic9"))%>" style="width:156px; height:104px;margin:0 25px 20px 0; position:relative" onClick="showLightBox()"/> 
     <img src="<%response.Write(rs("genPic10"))%>" style="width:156px; height:104px; margin:0 14px 20px 0; position:relative" onClick="showLightBox()"/> 
    </article> 
</article> 

<script> 
    document.createElement('lightbox'); 
</script> 

<lightbox id="lightBox" style="visibility:hidden;"> 
    <section> 
     <img src="<%response.Write(rs("The corrosponding img"))%>" style="width:800px; height:600px;margin:-300px 0 0 -400px; left:50% ; top:50%; position: fixed; z-index:999;" onClick="hideLightBox()"/> 
    </section> 
</lightbox> 

<script> 
    function showLightBox() 
    { 
     document.getElementById("greyOut").style.visibility = "visible"; 
     document.getElementById("lightBox").style.visibility = "visible"; 
    } 
    function hideLightBox() 
    { 
     document.getElementById("greyOut").style.visibility = "hidden"; 
     document.getElementById("lightBox").style.visibility = "hidden"; 
    } 
</script> 

Answer 1

發送點擊圖像元素showLightBox這樣的：

.... onClick="showLightBox(this)" 

，你可以得到圖像要素的內部showLightBox這樣來源：

showLightBox(el){ 
    var src = el.src; 

    var lightBox = document.getElementById('lightBox'); 
    lightBox.querySelector('img').src = src; 

} 

你當然可以爲圖片分配一個id並保存一段javascript。例如。

document.getElementById('lightBoxImage').src = src