jquery isotop to activate filterable custom portfolio

jquery isotop to activate filterable custom portfolio

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.isotope.min.js"></script>

<script type="text/javascript">
 
		(function($){
		 
		  var $container = $('#portfolio'),
		 
			  // create a clone that will be used for measuring container width
			  $containerProxy = $container.clone().empty().css({ visibility: 'hidden' });   
		 
		  $container.after( $containerProxy );  
		 
			// get the first item to use for measuring columnWidth
		  var $item = $container.find('.portfolio-item').eq(0);
		  $container.imagesLoaded(function(){
		  $(window).smartresize( function() {
		 
			// calculate columnWidth
			var colWidth = Math.floor( $containerProxy.width() / 3 ); // Change this number to your desired amount of columns
		 
			// set width of container based on columnWidth
			$container.css({
				width: colWidth * 3 // Change this number to your desired amount of columns
			})
			.isotope({
		 
			  // disable automatic resizing when window is resized
			  resizable: false,
		 
			  // set columnWidth option for masonry
			  masonry: {
				columnWidth: colWidth
			  }
			});
		 
			// trigger smartresize for first time
		  }).smartresize();
		   });
		 
		// filter items when filter link is clicked
		$('#filters a').click(function(){
		$('#filters a.active').removeClass('active');
		var selector = $(this).attr('data-filter');
		$container.isotope({ filter: selector, animationEngine : "css" });
		$(this).addClass('active');
		return false;
		 
		});
		 
		} ) ( jQuery );

</script>

Above codes should go in footer.php file. #portfolio should be the container ID of your portfolio.