Filtering portfolio

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

//filter menu
<div class="work-filter wow fadeInRight animated" data-wow-duration="500ms">
	<ul class="text-center">
		<li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
		<li><a href="javascript:;" data-filter=".branding" class="filter">Branding</a></li>
		<li><a href="javascript:;" data-filter=".web" class="filter">web</a></li>
		<li><a href="javascript:;" data-filter=".logo-design" class="filter">logo design</a></li>
		<li><a href="javascript:;" data-filter=".photography" class="filter">photography</a></li>
	</ul>
</div>
//project filtering
<div class="project-wrapper">

	<figure class="mix work-item branding">
		<img src="img/works/item-1.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-1.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
	<figure class="mix work-item web">
		<img src="img/works/item-2.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-2.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
	<figure class="mix work-item logo-design">
		<img src="img/works/item-3.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-3.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
	<figure class="mix work-item photography">
		<img src="img/works/item-4.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-4.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>

	<figure class="mix work-item branding">
		<img src="img/works/item-5.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-5.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
	<figure class="mix work-item web">
		<img src="img/works/item-6.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-6.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
	<figure class="mix work-item logo-design">
		<img src="img/works/item-7.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-7.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
	<figure class="mix work-item photography">
		<img src="img/works/item-8.jpg" alt="">
		<figcaption class="overlay">
			<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-8.jpg"><i class="fa fa-eye fa-lg"></i></a>
			<h4>Labore et dolore magnam</h4>
			<p>Photography</p>
		</figcaption>
	</figure>
	
</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 custom.js file

jQuery code

$(".project-wrapper").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?