<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"> <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script> <div class="container"> <h1 class="text-center"> Image Gallery Views </h1> <div class="portfolio-item row"> <div class="item selfie col-lg-3 col-md-4 col-6 col-sm"> <a href="https://image.freepik.com/free-photo/stylish-young-woman-with-bags-taking-selfie_23-2147962203.jpg" class="fancylight popup-btn" data-fancybox-group="light"> <img class="img-fluid" src="https://image.freepik.com/free-photo/stylish-young-woman-with-bags-taking-selfie_23-2147962203.jpg" alt=""> </a> </div> <div class="item gts col-lg-3 col-md-4 col-6 col-sm"> <a href="https://image.freepik.com/free-photo/pretty-girl-near-car_1157-16962.jpg" class="fancylight popup-btn" data-fancybox-group="light"> <img class="img-fluid" src="https://image.freepik.com/free-photo/pretty-girl-near-car_1157-16962.jpg" alt=""> </a> </div> <div class="item selfie col-lg-3 col-md-4 col-6 col-sm"> <a href="https://image.freepik.com/free-photo/blonde-tourist-taking-selfie_23-2147978899.jpg" class="fancylight popup-btn" data-fancybox-group="light"> <img class="img-fluid" src="https://image.freepik.com/free-photo/blonde-tourist-taking-selfie_23-2147978899.jpg" alt=""> </a> </div> <div class="item gts col-lg-3 col-md-4 col-6 col-sm"> <a href="https://image.freepik.com/free-photo/cute-girls-oin-studio_1157-18211.jpg" class="fancylight popup-btn" data-fancybox-group="light"> <img class="img-fluid" src="https://image.freepik.com/free-photo/cute-girls-oin-studio_1157-18211.jpg" alt=""> </a> </div> </div> </div>

body{ margin:0; padding:0; } .portfolio-menu{ text-align:center; } .portfolio-menu ul li{ display:inline-block; margin:0; list-style:none; padding:10px 15px; cursor:pointer; -webkit-transition:all 05s ease; -moz-transition:all 05s ease; -ms-transition:all 05s ease; -o-transition:all 05s ease; transition:all .5s ease; } .portfolio-item .item{ /*width:303px;*/ float:left; margin-bottom:10px; }

$('.portfolio-item').isotope({ itemSelector: '.item', layoutMode: 'fitRows' }); $('.portfolio-menu ul li').click(function(){ $('.portfolio-menu ul li').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $('.portfolio-item').isotope({ filter:selector }); return false; }); $(document).ready(function() { var popup_btn = $('.popup-btn'); popup_btn.magnificPopup({ type : 'image', gallery : { enabled : true } }); });