20
SHARES

Hello guys , How you doing  ?

Have you seen our portfolio section ? ( codingdroid.com/portfolio/ ) .Notice the Swiping effect when categories are toggled. Isnt Cool ? We will show how to do it !

You can see the Demo of this Tutorial Here and also you can download the Files.

 Demo

Download Files

Let`s get started.

First we will include the jquery and jQuery Isotope file in head.

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script>

Now lets create the HTML markup.


<h1 id="myHeading">Coding Droid - Demo - jQuery Isotope</h1>

<div class="portfolioFilter">

	<a href="#" data-filter="*" class="current">All Categories</a>
	<a href="#" data-filter=".people">People</a>
	<a href="#" data-filter=".places">Places</a>
	<a href="#" data-filter=".food">Food</a>
	<a href="#" data-filter=".objects">Objects</a>

</div>

<div class="portfolioContainer">

	<div class="objects">
		<img src="images/object1.jpg" alt="image">
	</div>

	<div class="people places">
		<img src="images/people2.jpg" alt="image">
	</div>

	<div class="food">
		<img src="images/food1.jpg" alt="image">
	</div>

	<div class="places">
		<img src="images/place2.jpg" alt="image">
	</div>

	<div class="places">
		<img src="images/place3.jpg" alt="image">
	</div>

	<div class="objects">
		<img src="images/object2.jpg" alt="image">
	</div>

	<div class="people">
		<img src="images/people1.jpg" alt="image">
	</div>

	<div class="food">
		<img src="images/food2.jpg" alt="image">
	</div>

	<div class="places">
		<img src="images/place1.jpg" alt="image">
	</div>

</div>

We have assign a class to each div in the portfolioContainer div through which we will do the filtering.
Isotope can hide and show item elements via the filter option. filter accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
Here we are filtering the data with data-filter attribute.

Notice how the classes in the container match the data-filter attribute in the filter. These values need to match exactly and this is, in essence, how you categorize the objects using Isotope. If you want to put objects into a particular category, you simply need to add the classes that you want and separate them by spaces. Some objects can have one category, some have multiple categories.

Now Lets give it some styling

h1#myHeading{
    color: white;
    text-align: center;
    margin: 0;
    padding: 20px;
    background: #0081E7;
    margin-bottom: 13px;
}

.portfolioFilter {
    text-align: center;
    margin-bottom: 10px;
}

.portfolioFilter a {
    margin-right: 10px;
	color:#666;
	text-decoration:none;
}

.portfolioFilter a.current {
    font-weight:bold;
}

img {
    margin:5px;
}

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

To enable animation with CSS transitions, you’ll need the following code in your CSS:

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Now the main parts comes where we will enable the Jquery Isotope by adding following coding in < script > tag .

[js]

$(window).load(function(){
var $container = $(‘.portfolioContainer’);
$container.isotope({
filter: ‘*’,
animationOptions: {
duration: 750,
easing: ‘linear’,
queue: false
}
});

$(‘.portfolioFilter a’).click(function(){
$(‘.portfolioFilter .current’).removeClass(‘current’);
$(this).addClass(‘current’);

var selector = $(this).attr(‘data-filter’);
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: ‘linear’,
queue: false
}
});
return false;
});
});

[/js]

Notice the line ‘ var selector = $(this).attr(‘data-filter’); ‘ . We are getting the data-filter value and passing these values to jQuery Isotope. As we told Isotope can hide and show item elements via the filter option. filter accepts a jQuery selector. Items that match that selector will be shown. Items that do not match will be hidden.
For example – when anchor tag with data-fileter=”.food” is clicked , it will show only those div that has class of food and hide rest of the class.

If this Tutorial helped you in some way , Do share it or like it :)

20
SHARES