Filtering Portfolio

We have used mixitup filtering plugin to filter the works
1. Html Markup Set
html markup

<div class="block">
  <div class="portfolio-menu">
    <ul>
        <li class="filter" data-filter="all">Everything</li>
        <li class="filter" data-filter=".Branding">Branding</li>
        <li class="filter" data-filter=".Websites">Websites</li>
        <li class="filter" data-filter=".Graphic">Graphic</li>
        <li class="filter" data-filter=".design">design</li>
        <li class="filter" data-filter=".Video">Video</li>
    </ul>
  </div>
  <div class="portfolio-contant">
    <ul id="portfolio-contant-active">
        <li class="mix Branding">
          <a href="#">
            <img src="img/portfolio/work1.jpg" alt="">
            <div class="overly">
              <div class="position-center">
                <h2>Tesla Motors</h2>
                <p>Labore et dolore magna aliqua. Ut enim ad </p>
                
              </div>
            </div>
          </a>
      </li>
      <li class="mix Websites">
        <a href="#">
          <img src="img/portfolio/work2.jpg" alt="">
          <div class="overly">
            <div class="position-center">
              <h2>Tesla Motors</h2>
              <p>Labore et dolore magna aliqua. Ut enim ad </p>
              
            </div>
          </div>
        </a>
      </li>
      <li class="mix Graphic">
        <a href="#">
          <img src="img/portfolio/work3.jpg" alt="">
          <div class="overly">
            <div class="position-center">
              <h2>Tesla Motors</h2>
              <p>Labore et dolore magna aliqua. Ut enim ad </p>
              
            </div>
          </div>
          
        </a>
      </li>
      <li class="mix design">
        <a href="#">
          <img src="img/portfolio/work4.jpg" alt="">
          <div class="overly">
            <div class="position-center">
              <h2>Tesla Motors</h2>
              <p>Labore et dolore magna aliqua. Ut enim ad </p>
              
            </div>
          </div>
        </a>
      </li>
      <li class="mix Video">
        <a href="#">
          <img src="img/portfolio/work5.jpg" alt="">
          <div class="overly">
            <div class="position-center">
              <h2>Tesla Motors</h2>
              <p>Labore et dolore magna aliqua. Ut enim ad </p>

            </div>
          </div>
        </a>
      </li>
      <li class="mix Graphic">
        <a href="#">
          <img src="img/portfolio/work6.jpg" alt="">
          <div class="overly">
            <div class="position-center">
              <h2>Tesla Motors</h2>
              <p>Labore et dolore magna aliqua. Ut enim ad </p>
              
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

Add your menu with data-filter for filtering your contents. Then add mix and the data-filter name your want filter on your content.

2. Mixitup initialization on main.js file

jQuery code

$("#portfolio-contant-active").mixItUp();

initialize with the id of your contents parent

If you want to know more about mixitup try this following link – https://www.kunkalabs.com/mixitup/

Was this article helpful to you? Yes No

How can we help?