How to create jQuery portfolio filter gallery

A portfolio filter gallery is one kind of item sorting. Using jQuery we can easily create this kind of item sorting or portfolio filter gallery.
In this post, we will learn how can we create a portfolio filter gallery using jquery, also I will provide you the complete source code for free so that you can practice it.

Logic to create jQuery portfolio filter gallery

The logic of creating a portfolio filter gallery is very simple. Look at the image we just need to hide all items and only show the targeted itmes when we click on the button.

On-click Hide all items using jquery

To hide anything using jquery we can use jquery hide() or fadeOut() methods. If we want to hide slowly or with animation we can use the fadeOut() method otherwise we can use the hide() method. In this case, we will use the hide() method because we don’t want any animation when items are hiding, we will use animation when items are showing.

$(".btn-class").click(function(){
  // $(".items-common-class").fadeOut(); // hide slowly
  $(".items-common-class").hide(); // hide all
})

Note: use a common class for all of your portfolios item, then when you click on your button hide all the items using your common class as the above technique.
What the video or download the complete source code for better understanding.

On-click show targeted items using jquery

To show anything using jquery we can use the show() method or fadeIn() method. The fadeIn() method will show your item with some animation that means it will show the items slowly. In this case, we will use the fadeIn() method because we want to show our items slowly.

$(".btn-class").click(function(){
   $(".targeted-times-class").fadeIn(); // show slowly
// $(".targeted-times-class").show(); // normal showing
})

Note: use targeted class to your targeted item, also get the targeted class name from your button when you click.

On-click Get data attributes form button

This is the most important part of creating a “jQuery portfolio filter gallery” project. In this part, we will get our targeted class from the button when we click on the button.

The technique of getting targeted class

  1. Use data attribute to your button.
  2. Use the same value to your items class as the class name.
<!-- all buttons -->
<a data-target="category-1" href="#">category-1</a>
<a data-target="category-2" href="#">category-2</a>
<!-- all items -->
<div class="items-common-class category-1">
  category-1 item
<div>
<div class="items-common-class category-2">
  category-2 item
<div>
<div class="items-common-class category-2">
  category-2 item
<div>
<div class="items-common-class category-1">
  category-1 item
<div>

Note: Suppose your button’s data targeted value is ‘category-1’ and some of your items also contain class ‘category-1’ then after the click, you can easily show thous items that contain ‘category-1’ class.
Make sure you add '#' to the href attrbute in anchor tag

$(".btn-class").click(function(){
  var targeted_items_class  = $(this).data('target'); // getting the data attrbute
  // var targeted_items_class  = $(this).attr('data-target');
})

Note: you can also use the attr() method to get attributes value.
Now use this variable to show targeted items, If don’t understand please watch the video or download the complete source code.

Activate and deactivate button using jQuery

Activate and deactivate a button using jquery is so easy, you just need to add and remove a class from your button.

Add and remove class using jquery.

To add a class in HTML element using jquery we can use the addClass() method, this method will take the class name as a string. Similarly to remove the class we need to use the removeClass() method this method also takes the class name as a string.

$(".btn-class").addClass('active'); // add class
$(".btn-class").removeClass('active'); // remove class

In this case, we will remove the ‘active’ class every time when we click on the button after that we will add the active class to the clicked button using the ‘this’ keyword.

$(".btn-class").removeClass('active'); // remove class from all button
$(".btn-class").addClass('active'); // add class to the clicked button

Note: make use of your design active class in the CSS file before add using jquery, If still do not understand watch the video or download the complete source code.

.active{
  background:green;
  color:#fff;
}
Still you face problems, feel free to contact with me, I will try my best to help you.