CODEWITHSUNDEEP
javascripthtmlcssasp-classic
NvZ88
NvZ88

Reputation: 3

Custom css/javascript lightbox

I'm trying to create my own custom css/javascript lightbox to display pictures on a webste. I know there are multiple jquery lightboxes available but I would love for this to work.

Pardon the inline css as I will move that to an external style sheet. I'm keeping it there for ease of use and I will be creating classes for both the tags. So, the problem and question is: how do I send the src from each of the tags to the corresponding #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>

Upvotes: 0

Views: 336

Answers (1)

Nathan
Nathan

Reputation: 142

Send the clicked image element to showLightBox like this:

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

and you can get the source of the image element inside showLightBox like this:

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

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

}

You could of course assign an id to the lightbox image and save yourself a bit of javascript. eg.

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

Upvotes: 1

Related Questions