Loading

Gallery Image Lightbox

IMG Lightbox

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Gallery Image Lightbox</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//goo.gl/yDbmRB" rel="stylesheet">
<link href="//goo.gl/HLXxEE" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <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-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
*{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);}
/* Downloaded from https://ahoj.co.uk/ */
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('https://pinterest.com/pin/create/button/?url=' + document.URL, 'twitter-popup', 'height=400,width=600');
    if(PtNw.focus) { facebookWindow.focus(); }
    return false;
}

This awesome code is write by WILDER TAYPE, you can se more from this user in the personal repository