My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size.
The issue I'm facing is how to center the popup div on the screen, especially when each picture has different dimensions.
I am looking for a solution using javascript/jQuery. Can anyone help?
JSFiddle: http://jsfiddle.net/29bo2k9q/
HTML:
<div id="pic1" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-
xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302"/></div>
<div id="pic2" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335"/></div>
<div id="fade" class="black_overlay"></div>
<div id="wrapper">
<section id="gallery">
<ul>
<li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302');">
<a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
</li>
<li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335');">
<a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic2').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
</li>
</ul>
</section>
</div>
CSS:
#gallery {
text-align: center;
width: 100%;
}
#gallery ul{
display: block;
padding: 0;
list-style: none;
overflow: hidden;
}
#gallery ul li {
display: inline-block;
vertical-align: top;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 250px;
height: 250px;
margin: 2.5%;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
-khtml-border-radius: 5px; /* for old Konqueror browsers */
cursor: pointer;
.black_overlay{
cursor: pointer;
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 {
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: 0 auto;
border: 8px solid orange;
background-color: #eee;
z-index:1002;
}
.gallerylink{
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}