Very Simple Lightbox Effect Well working

in the top of head put the style code.

<style>
        .black_overlay{
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: fixed;
            top: 2%;
            left: 25%;
            width: 50%;
            height: 85%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>

Paste the below code to a href tag.

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="images1.jpg" alt="image" border="0" class="product-image-border" /></a>

Put this code after a href tag. this div contains the content you want to show in lightbox.

<div id="light" class="white_content"><img src="images/2/large/1.jpg" alt="image" border="0" /><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>

For more information checkout our official website.

http://www.shreejiinfotek.com/

Hire Web designer