"Portfolio with filter"
Bootstrap 4.1.1 Snippet by jaseem

<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">&times</div><div class="gg-nxt gg-bt">→</div>'; } else if (p == l) { return '<div class="gg-close gg-bt">&times</div><div class="gg-prev gg-bt">←</div>'; } else{ return '<div class="gg-close gg-bt">&times</div><div class="gg-nxt gg-bt">→</div><div class="gg-prev gg-bt">←</div>'; } } else{ return '<div class="gg-close gg-bt">&times</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); } }); });

Related: See More


Questions / Comments: