自定义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