<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto p-5">
<button class="btn btn-primary active filter-button" data-filter="selfie">selfie</button>
<button class="btn btn-primary filter-button" data-filter="gts">gts</button>
<button class="btn btn-primary filter-button" data-filter="paisajes">paisajes</button>
<button class="btn btn-primary filter-button" data-filter="disenos">disenos</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="gg-box">
<div class="gg-element filter selfie">
<img src="https://picsum.photos/1600/1300/?random">
</div>
<div class="gg-element filter disenos">
<img src="https://picsum.photos/1600/1200/?random">
</div>
<div class="gg-element filter selfie">
<img src="https://picsum.photos/1200/1600/?random">
</div>
<div class="gg-element filter gets">
<img src="https://picsum.photos/1600/1201/?random">
</div>
<div class="gg-element filter paisajes">
<img src="https://picsum.photos/1200/1601/?random">
</div>
<div class="gg-element filter disenos">
<img src="https://picsum.photos/1201/1600/?random">
</div>
<!--
<div class="gg-element">
<img src="https://picsum.photos/1600/1310/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1602/1311/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1603/1311/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1602/1312/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1201/1601/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1201/1602/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1602/1313/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1602/1314/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1602/1315/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1602/1316/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1203/1602/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1605/1312/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1204/1602/?random">
</div>
<div class="gg-element">
<img src="https://picsum.photos/1205/1602/?random">
</div>-->
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
background: #f9f9f9;
}
.gg-box{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
grid-auto-rows: 200px;
grid-gap: 8px;
}
.gg-element img{
object-fit: cover;
cursor: pointer;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.02);
}
.gg-element img:hover{
opacity: 0.98;
}
#gg-screen{
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
top:0;
left: 0;
display: none;
background: rgba(255,255,255,0.85);
z-index: 9999;
text-align: center;
}
#gg-screen .gg-image{
height: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
#gg-screen .gg-image img{
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
.gg-bt{
width: 38px;
height: 38px;
background: rgba(255,255,255,0.6);
color: #222;
border-radius: 50%;
text-align: center;
line-height: 32px;
vertical-align: middle;
display: inline-block;
cursor: pointer;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-webkit-transition: all .4s ease;
transition: all .4s ease;
font-size: 25px;
border: 1px solid rgba(0,0,0,0.05);
box-sizing: border-box;
padding-left: 2px;
}
.gg-bt:hover{
background: rgba(255,255,255,0.8);
border: 1px solid rgba(0,0,0,0.5);
}
.gg-close{
position: fixed;
top:0.5em;
}
.gg-close,.gg-nxt{
right: 0.5em;
}
.gg-prev{
left: 0.5em;
}
.gg-prev,.gg-nxt{
position: fixed;
bottom: 50%;
}
@media (min-width:478px){
.gg-element:nth-child(3n+0){
grid-row-end: span 2;
}
}
@media(max-width:768px){
.gg-box{
grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
grid-auto-rows: 150px;
grid-gap: 6px;
}
}
@media(max-width: 450px){
.gg-box{
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
grid-auto-rows: 100px;
grid-gap: 4px;
}
}
//Filter Button
$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr('data-filter');
if (value == "todo") {
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.' + value).hide('3000');
$('.filter').filter('.' + value).show('3000');
}
});
});
$(document).on('click','.gg-element',function(){
var selected=$(this);
var prev=$(this).prev().find('img');
var next=$(this).next().find('img');
$('#gg-screen').show();
var l=$(".gg-element").length-1;
var p=$(".gg-element").index(selected);
function buttons(){
if (l > 1) {
if (p == 0){
return '<div class="gg-close gg-bt">×</div><div class="gg-nxt gg-bt">→</div>';
}
else if (p == l) {
return '<div class="gg-close gg-bt">×</div><div class="gg-prev gg-bt">←</div>';
}
else{
return '<div class="gg-close gg-bt">×</div><div class="gg-nxt gg-bt">→</div><div class="gg-prev gg-bt">←</div>';
}
}
else{
return '<div class="gg-close gg-bt">×</div>';
}
}
buttons();
var content=buttons();
$("#gg-screen").html('<div class="gg-image"></div>' + content);
$(".gg-image").html('<img src="'+ $('img', this).attr('src') +'">');
$("body").css('overflow','hidden');
$(document).on('click','.gg-close',function(){
$("#gg-screen").hide();
$("body").css('overflow','auto');
});
$("#gg-screen").on('click', function(e) {
if (e.target == this){
$("#gg-screen").hide();
$("body").css('overflow','auto');
}
});
$(document).on('click','.gg-prev',function(){
selected=selected.prev();
prev=selected.find('img');
var previmg='<img src="'+ prev.attr('src') +'">';
$(".gg-image").html(previmg);
p=$(".gg-element").index(selected);
buttons();
content=buttons();
$("#gg-screen").html('<div class="gg-image">'+ previmg + '</div>' + content);
});
$(document).on('click','.gg-nxt',function(){
selected=selected.next();
next=selected.find('img');
var nxtimg='<img src="'+ next.attr('src') +'">';
$(".gg-image").html(nxtimg);
p=$(".gg-element").index(selected);
buttons();
content=buttons();
$("#gg-screen").html('<div class="gg-image">'+ nxtimg + '</div>' + content);
});
$(document).on('keydown',function(e) {
if(e.keyCode == 37 && p>0) {
selected=selected.prev();
prev=selected.find('img');
var previmg='<img src="'+ prev.attr('src') +'">';
$(".gg-image").html(previmg);
p=$(".gg-element").index(selected);
buttons();
content=buttons();
$("#gg-screen").html('<div class="gg-image">'+ previmg + '</div>' + content);
}
else if(e.keyCode == 39 && p < l) {
selected=selected.next();
next=selected.find('img');
var nxtimg='<img src="'+ next.attr('src') +'">';
$(".gg-image").html(nxtimg);
p=$(".gg-element").index(selected);
buttons();
content=buttons();
$("#gg-screen").html('<div class="gg-image">'+ nxtimg + '</div>' + content);
}
});
});
