Skip to content

Instantly share code, notes, and snippets.

@stanwmusic
Created March 7, 2017 00:42
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save stanwmusic/2e51c3253a0d4540e5fe21ee64338804 to your computer and use it in GitHub Desktop.
Gallery Image Lightbox
<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);}
@stanwmusic
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment