mixitup&magnific-popup

mixitup&magnific-popup.css

http://dimsemenov.com/plugins/magnific-popup/documentation.html 
https://mixitup.kunkalabs.com/
https://mixitup.kunkalabs.com/learn/tutorial/get-started/
https://mixitup.kunkalabs.com/docs/

<!--magnific-popup -->
    <link rel="stylesheet" href="css/magnific-popup.css">

<section id="portfolio" class="portfolio-area fix ptb-80">
          <div class="column">
              <div class="portfolio-menu fix">
                  <div class="section-title text-black float-left">
                      <h2>Portfolio</h2>
                  </div>
                  <div class="filter-menu float-right">
                      <div class="filter" data-filter="all">All</div>
                        <div class="filter" data-filter=".category-1">Category 1</div>
                        <div class="filter" data-filter=".category-2">Category 2</div>
                        <div class="filter" data-filter=".category-3">Category 3</div>
                  </div>
              </div>
              <div class="portfolio-content">
                  <div id="Container" class="row">
                       <div class="col-4 mix category-1 mb-30">
                            <div class="single-portfolio">
                                <a href="img/portfolio/blueasy-freebie.jpg"><img src="img/portfolio/blueasy-freebie.jpg" alt=""></a>
                            </div>
                       </div> <!--end col-4-->
                       <div class="col-4 mix category-2 mb-30">
                            <div class="single-portfolio">
                                <a class="image-link" href="img/portfolio/blueasy-freebie8.jpg"><img src="img/portfolio/blueasy-freebie8.jpg" alt=""></a>
                            </div>
                       </div> <!--end col-4-->
                       <div class="col-4 mix category-3 mb-30">
                            <div class="single-portfolio">
                                <a class="image-link" href="img/portfolio/blueasy-freebie2.jpg"><img src="img/portfolio/blueasy-freebie2.jpg" alt=""></a>
                            </div>
                       </div> <!--end col-4-->
                       <div class="col-4 mix category-3 mb-30">
                            <div class="single-portfolio">
                                <a class="image-link" href="img/portfolio/blueasy-freebie3.jpg"><img src="img/portfolio/blueasy-freebie3.jpg" alt=""></a>
                            </div>
                       </div> <!--end col-4-->
                      
                  </div>  <!--end row-->              
              </div> <!--end portfolio-content-->
          </div> <!--end column-->         
      </section> <!--end portfolio-->

<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 
    <script src="js/jquery.magnific-popup.js"></script>

===================================================================
(function($){
     'use strict';

	// Instantiate MixItUp:
	$('#Container').mixItUp();
    
    //magnificPopup
    $('.image-link').magnificPopup({
  type: 'image',
  gallery:{
    enabled:true
  }
});

})(jQuery);