我正在尝试创建自己的自定义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>
答案 0 :(得分: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