IMG Lightbox
A Pen by Stan Williams on CodePen.
IMG Lightbox
A Pen by Stan Williams on CodePen.
<div class="X"> | |
<h1> Gallery Image Lightbox</h1> | |
<p class="W">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quis libero error quaerat eaque, optio architecto, facilis iusto reiciendis, reprehenderit cum a repudiandae ratione molestiae aut porro provident, id deleniti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, harum dolor velit molestiae nemo natus neque nisi eaque eum quos dolorem accusantium ratione nostrum obcaecati autem, numquam saepe officia totam?. <a target="_blank" href="//goo.gl/MnZFJh">more inf.</a> | |
</p> | |
<div class="sh"> | |
<button class="me"><i class="fa fa-share-alt"></i>Share</button> | |
<div class="shThis"> | |
<a id="fb" href="#"><i class="fa fa-facebook"></i> Facebook</a> | |
<a id="tw" href="#"><i class="fa fa-twitter"></i> Twitter</a> | |
<a id="gp" href="#"><i class="fa fa-google-plus"></i> Google+</a> | |
<a id="pt" href="#"><i class="fa fa-pinterest"></i> Pinterest</a> | |
</div> | |
</div> | |
<ul> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/5LRU8h" alt="Water"/></figure> | |
<p class="fI">Water</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/70dvmY" alt="Snowy"/></figure> | |
<p class="fI">Snowy</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/HOzdR4" alt="Happy"/></figure> | |
<p class="fI">Happy</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/IRxRxd" alt="Night"/></figure> | |
<p class="fI">Night</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/tQkQyJ" alt="Buildings"/></figure> | |
<p class="fI">Buildings</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/YzOtKN" alt="bridge"/></figure> | |
<p class="fI">Bridge</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/KYlFH2" alt="ray"/></figure> | |
<p class="fI">Ray</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/LaA3cH" alt="sun"/></figure> | |
<p class="fI">Sun</p> | |
</li> | |
<li> | |
<figure class="img-x"><img src="//goo.gl/mgCuaX" alt="Day"/></figure> | |
<p class="fI">Day</p> | |
</li> | |
</ul> | |
</div> | |
<!--Font: Baloo Bhania --> | |
<!--Refernce://goo.gl/8eXBnf--> |
var pictures = document.querySelectorAll('div .img-x'); | |
pictures.forEach(function(pic ){ | |
pic.addEventListener('click', function( e ){ | |
this.classList.toggle('lightbox'); | |
}); | |
}); | |
// For share buttons | |
var fbShare = document.querySelector('#fb'); | |
fbShare.onclick = function(e) { | |
e.preventDefault(); | |
var fbNw = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=400,width=600'); | |
} | |
var twShare = document.querySelector('#tw'); | |
twShare.onclick = function(e) { | |
e.preventDefault(); | |
var twNw = window.open('https://twitter.com/intent/tweet?url=' + document.URL, 'twitter-popup', 'height=400,width=600'); | |
} | |
var GpShare = document.querySelector('#gp'); | |
GpShare.onclick = function(e) { | |
e.preventDefault(); | |
var GpNw = window.open('https://plus.google.com/share?url=' + document.URL, 'twitter-popup', 'height=400,width=600'); | |
} | |
var PtShare = document.querySelector('#pt'); | |
PtShare.onclick = function(e) { | |
e.preventDefault(); | |
var PtNw = window.open('http://pinterest.com/pin/create/button/?url=' + document.URL, 'twitter-popup', 'height=400,width=600'); | |
if(PtNw.focus) { facebookWindow.focus(); } | |
return false; | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
*{padding: 0;margin: 0;} | |
body{background: #d8dddd;padding: 1% 2%;} | |
.X{ | |
padding: 1% 2%; | |
margin: auto; | |
color: #2c3e50; | |
max-width: 1200px; | |
text-align: center; | |
background: #ecf0f1; | |
box-shadow: 0 2px 4px rgba(0,0,0, .2); | |
font-family: 'Baloo Bhaina', cursive; | |
} | |
.W{ | |
font-size: 17px; | |
line-height: 30px; | |
letter-spacing: .6px; | |
margin: 10px auto; | |
text-align: justify; | |
font-family: 'Karla', sans-serif; | |
} | |
li{ | |
width: 32%; | |
margin: 10px 6px; | |
background: #eceff1; | |
display: inline-block; | |
border-radius: 4px; | |
box-shadow: 0 2px 4px rgba(0,0,0, .2); | |
} | |
li:hover{box-shadow:0 5px 10px rgba(0,0,0,.15);} | |
img {width: 100%;} | |
img:hover{cursor: pointer;} | |
/*For Lightbox*/ | |
.lightbox{ | |
left: 0; | |
top: 0; | |
width: 100vw; | |
height: 100vh; | |
display: flex; | |
position: fixed; | |
background: rgba(0,0,0, .9); | |
} | |
.lightbox img { | |
width: auto; | |
height: auto; | |
max-width: 90vw; | |
max-height: 90vh; | |
margin: auto; | |
} | |
/*Responsive*/ | |
@media (max-width: 1148px){ | |
li{width: 30%;} | |
} | |
@media (max-width: 768px){ | |
li{display: inline-block; width: auto;} | |
li img{box-shadow: 0 2px 4px rgba(0,0,0, .4);} | |
figure{float: left; width: 70%;} | |
.fI{ | |
float: right; | |
width: 30%; | |
height: 144px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
} | |
/*sh = share*/ | |
.sh { | |
right: 0; | |
position: relative; | |
display: inline-block; | |
} | |
.sh:hover .shThis{ | |
display: block; | |
} | |
.sh button{ | |
color: #fff; | |
border: none; | |
padding: 16px; | |
cursor: pointer; | |
font-size: 16px; | |
font-weight: bold; | |
border-radius: 3px; | |
background: #03a9f4; | |
box-shadow: 4px 4px 2px 0 rgba(85, 172, 238, .4); | |
} | |
i{padding-right: 10px;} | |
.sh a{ | |
color: #000; | |
display: block; | |
text-align: left; | |
padding: 12px 16px; | |
text-decoration: none; | |
} | |
.sh a:hover{ | |
background: #f1f1f1; | |
} | |
.shThis{ | |
left: 0; | |
right: 0; | |
display: none; | |
min-width: 160px; | |
position: absolute; | |
background: #f9f9f9; | |
box-shadow: 0 8px 16px rgba(0,0,0, .2); | |
} | |
#fb{color: rgba(59, 89, 152, 1);} | |
#tw{color: rgba(85, 172, 238, 1);} | |
#gp{color: rgba(221, 75, 57, 1);} | |
#pt{color: rgba(203, 32, 39, 1);} |
Demo: http://codepen.io/Stanssongs/full/NpREow/