自定义css / javascript灯箱

时间:2014-01-11 17:47:41

标签: javascript html css asp-classic

我正在尝试创建自己的自定义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> 

1 个答案:

答案 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