http://www.webdesigntunes.com/coding/jquery-lterable-portf...

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. Well 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 [1]. First thanks to him for the amazing plugin! Well 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 [2] 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. Lets have a look. Live preview [3] Download it [4]

Youll 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 dont 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>

1 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

<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. Ive added images to download .zip folder, please dont 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 [5]">

<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>

2 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

<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 [6]">

<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>

3 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

</article>

<article class="entry video logo print"> <a data-rel="prettyPhoto" href="http://vimeo.com/34266952 [7]">

<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>

4 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

</a>

</article>

<article class="entry video logo print"> <a data-rel="prettyPhoto" href="http://vimeo.com/34266952 [8]">

<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 styles for the portfolio items. We used CSS3 webkittransition-property and duration for filterable animation effect. Add following codes to the your style.css file. If youll add CSS codes in your style.css, your filterable portfolio will look our demo.
nav.primary {

width:auto;

margin:30px auto;

display:table;

5 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

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;

6 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

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;

7 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

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;

8 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

.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 [9]. Add this codes to the your footer area.

9 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

jQuery(document).ready(function(){

jQuery('a[data-gal]').each(function() {

jQuery(this).attr('rel', jQuery(this).data('gal'));

});

jQuery("a[datarel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:false,overlay_gallery: false,social_tools:false,deeplinking:false});

});

Step #5 Entegre jQuerys

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 [10]"></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 looks our demo.
var $container = $('.portfolio');

$container.isotope({

filter: '*',

animationOptions: {

duration: 750,

easing: 'linear',

queue: false,

10 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

});

$('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');

11 of 12

1/31/2557 BE, 8:06 PM

http://www.webdesigntunes.com/coding/jquery-lterable-portf...

});

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.

1. http://metafizzy.co/ 2. http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ 3. http://webdesigntunes.com/tutorial/filterable/ 4. http://webdesigntunes.com/download/filterable.zip 5. http://vimeo.com/34266952 6. http://vimeo.com/34266952 7. http://vimeo.com/34266952 8. http://vimeo.com/34266952 9. http://dailydesignnotes.com/tutorials/how-to-make-html5-valid-prettyphoto/ 10. http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js

12 of 12

1/31/2557 BE, 8:06 PM