How to Create Stunning jQuery Filterable Portfolio

How to Create Stunning jQuery Filterable Portfolio

We have a new jQuery tutorial for you today, you can learn how to create stunning portfolio page to show off your work. We’ll harness the power of the jQuery Isotope plugin in order to make the portfolio items with mouse hover, preetyPhoto and filterable. This is first article on WebDesignTunes and i hope so you like this article. The jQuery Isotope has been developed from Metafizzy. First thanks to him for the amazing plugin! We’ll be create this filterable portfolio implementation using jQuery Isotope. Also we use a lightbox effect (prettyPhoto) for this tutorial.

You can download the prettyPhoto from No Margin for Errors web design club. The idea is to display all of your portfolio items with a lightbox effect that would have a filtering option allowing visitors to filter portfolio items by any category. So, if you have worked in your field for a while, there is a beautiful good chance that you have a rather wide portfolio. In this tutorial, I will show you how to make “jQuery filterable portfolio” a little more interesting with just a little bit of jQuery. For further tutorials, please share our articles on social networks and thus support us. Let’s have a look.

Live preview Download it

You’ll learn;

  • How to make jQuery filterable portfolio
  • How to integrate prettyPhoto (HTML5 valid)
  • How to make a mouse hover with CSS3

Step #1 – Make a filterable menu

The first step you need to create one menu for filterable categories don’t forget to add ALL menu with class=”selected”, this menu will show all portfolio items.

<nav class="primary clearfix">
	<ul>
		<li><a href="#" class="selected" data-filter="*">All</a></li>
		<li><a href="#" data-filter=".web">Web Design</a></li>
		<li><a href="#" data-filter=".ill">Ilustration</a></li>
		<li><a href="#" data-filter=".logo">Logo</a></li>
		<li><a href="#" data-filter=".video">Video</a></li>
		<li><a href="#" data-filter=".print">Print Design</a></li>
	</ul>
</nav>

Step #2 – Build your portfolio

The second step to build your portfolio. I’ve added images to download .zip folder, please don’t forget to change all images. In addition we used class=”entry” tag for video and image mouse hover effects. If you want edit these hovers, just use CSS3 codes (no need jQuery).

		<section class="main">
			
			<div class="portfolio">
				
				<article class="entry video">
					<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
                    <img src="images/portfolio/work1.jpg" alt="">
					<span class="video-hover"></span>
                    </a>
				</article>

				<article class="entry web">
                    <a data-rel="prettyPhoto" href="images/portfolio/work2.jpg">
					<img src="images/portfolio/work2.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>

				<article class="entry print">
                    <a data-rel="prettyPhoto" href="images/portfolio/work3.jpg">
					<img src="images/portfolio/work3.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>

				<article class="entry ill">
                    <a data-rel="prettyPhoto" href="images/portfolio/work4.jpg">
					<img src="images/portfolio/work4.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>

				<article class="entry video logo">
					<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
                    <img src="images/portfolio/work5.jpg" alt="">
					<span class="video-hover"></span>
                    </a>
				</article>

				<article class="entry web print">
                    <a data-rel="prettyPhoto" href="images/portfolio/work6.jpg">
					<img src="images/portfolio/work6.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>

				<article class="entry video logo print">
					<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
                    <img src="images/portfolio/work7.jpg" alt="">
					<span class="video-hover"></span>
                    </a>
				</article>

				<article class="entry ill logo video">
                    <a data-rel="prettyPhoto" href="images/portfolio/work2.jpg">
					<img src="images/portfolio/work8.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article> 
                   
				<article class="entry video logo">
                    <a data-rel="prettyPhoto" href="images/portfolio/work9.jpg">
					<img src="images/portfolio/work9.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>

				<article class="entry web print">
                    <a data-rel="prettyPhoto" href="images/portfolio/work10.jpg">
					<img src="images/portfolio/work10.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>

				<article class="entry video logo print">
					<a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
                    <img src="images/portfolio/work11.jpg" alt="">
					<span class="video-hover"></span>
                    </a>
				</article>

				<article class="entry ill logo video">
                    <a data-rel="prettyPhoto" href="images/portfolio/work12.jpg">
					<img src="images/portfolio/work12.jpg" alt="">
					<span class="magnifier"></span>
                    </a>
				</article>  


			</div>

		</section>

Step #3 – Make your style

The third step is to create style’s for the portfolio items. We used CSS3 webkit-transition-property and duration for filterable animation effect. Add following codes to the your style.css file. If you’ll add CSS codes in your style.css, your filterable portfolio will look our demo.

nav.primary {
	width:auto;
	margin:30px auto;
	display:table;
}

nav.primary ul li  {
	float:left;
	list-style:none;
}

nav.primary ul li a {
	height:39px;
	display:block;
	font-size:15px;
	color:#000;
	padding:0 10px;
	text-decoration:none;
	line-height:39px;
}

nav.primary li a.selected {
    border-bottom: 3px solid #ED3131;
}

.main {
	padding:0;
	margin:0;
	display:block;
}

.entry {
	position:relative;
	float:left;
	margin:10px;
	cursor:pointer;
	width:225px;
	height:225px;
	padding:0;
}

.portfolio { margin:0; }

.magnifier {
	background:rgba(237,49,49,.7) url(images/magnifier.png) no-repeat center;
	position:absolute;
	top:10px;
	left:10px;
	bottom:10px;
	right:10px;
	opacity:0;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
.video-hover {
	background:rgba(237,49,49,.7) url(images/video.png) no-repeat center;
	position:absolute;
	top:10px;
	left:10px;
	bottom:10px;
	right:10px;
	opacity:0;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}

.entry:hover .video-hover,
.entry:hover .magnifier { opacity:1; }

img {
	max-width:100%;
}

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

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

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
        transition-duration: 0.8s;
}

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

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

Step #4 – Entegre prettyPhoto

At 4nd step, we integrate jQuery and CSS code for prettyPhoto.

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" />
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

Call prettyPhoto plugin (HTML5 Valid)

We use data-rel= instead rel= for prettyPhoto code. This will solve w3 validation problems in your design. For more information to learn how to make HTML5 valid preetyPhoto please click here. Add this codes to the your footer area.

jQuery(document).ready(function(){
	jQuery('a[data-gal]').each(function() {
	    jQuery(this).attr('rel', jQuery(this).data('gal'));
	});  	
	jQuery("a[data-rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false});
}); 

Step #5 – Entegre jQuery’s

At last step we integrate jQuery codes into your design. Below is an example how to add it. If there is standart jQuery code in your design, only integrate jquery.isotope.js link.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>

Call filterable plugin

Add jQuery plugin code to your footer are (above /body tag). If you have made, now your filterable portfolio look’s our demo.

	var $container = $('.portfolio');
	$container.isotope({
		filter: '*',
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});

	$('nav.primary ul a').click(function(){
		var selector = $(this).attr('data-filter');
		$container.isotope({
			filter: selector,
			animationOptions: {
				duration: 750,
				easing: 'linear',
				queue: false,
			}
		});
	  return false;
	});

	var $optionSets = $('nav.primary ul'),
	       $optionLinks = $optionSets.find('a');
	 
	       $optionLinks.click(function(){
	          var $this = $(this);
		  // don't proceed if already selected
		  if ( $this.hasClass('selected') ) {
		      return false;
		  }
	   var $optionSet = $this.parents('nav.primary ul');
	   $optionSet.find('.selected').removeClass('selected');
	   $this.addClass('selected'); 
	});

If you done steps properly, filterable portfolio will appear same as demo page. All codes are available at download link. You can download and use free from there. We hope this educative article will be useful for you. Thanks a lot or spare time to read it. Please help us by sharing this article in your social media profiles and also bookmark us.

Written by Filiz

Hey all, this is Filiz from Istanbul. i am 23 years old. I’m providing web design and development contents for Web Design Tunes!

26 Comments

  1. Pingback: Listly List - jQuery

        1. Filiz

          neocarpe, please try this;

          go jquery plugin for prettyPhoto and change

          data-rel^=’prettyPhoto to rel^=’prettyPhoto

          after use this code for images rel=”prettyPhoto [gallery]”

          I think it will be work.

  2. Noshir

    Hi,
    This script is really amazing, thanks for sharing. But when i implemented this script its not working in IE 7. Can you please suggest me ??
    made all the structure on XHTML base and replaced all HTML 5 tags with Div tags and so on. This is the only change i made.

    Please tell me why is it ot working in IE 7.

    Thank you

  3. Anthony

    This is exactly what I needed thank you! is there anyway of making this work in IE? or a way to disable the filter altogether and just leave the grid as it is in ‘All’ position? I’m still learning Jquery so apologises if this is a simple solution.

  4. Marie-Ange Lutz

    Great stuff. However, I wish it could be a little more responsive . Then, it would be perfect! When clicked, the pics appear very tiny and their caption (title) all squeezed up on small devices (below 700px). I have been unable to customize the code to get a better result… Is there a way either to disable the lightbox (i hate this but well…) or make pics look better on smaller sizes?
    Hope you can help me ! That would be great!
    http://www.hobbyt.be/creaties.html

    M.A.

  5. zefs

    Amazing work Filiz, thanks a lot for sharing. One question, is it possible when the portfolio first loads to select one of the “data-filters”(for example Web Design) instead of displaying All the portfolio items?

  6. HeneTene

    Nice, but it doesnt work….I mean, ok it works but with some few basic PrettyPhoto options. It doesnt work with flash, iframe, AJAX, which are some of the most important PP Options, to include what ever you want, from any web services, as soundcloud, etc.The Iframe redirects to the “iframe-source-page”. Flash doesnt work en general. Anyway nice try….

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ThemeForest - Responsive Themes for Web and Mobile Devices