Visit this link »

To filter portfolio items we will use Quicksand plugin. Additionally, we will... Read more→]]>

In this tutorial I will show you how to create a filterable portfolio using jQuery. The idea is to display all of your work in a single page that would have a filtering option allowing visitors to filter portfolio items by category. Limiting your portfolio to a single page helps to display all the portfolio items quickly and effectively and the filter makes it easy to navigate.

To filter portfolio items we will use Quicksand plugin. Additionally, we will need Easing Plugin to give advanced easing options and PrettyPhoto plugin to view full-size protfolio items.

The beautiful photos used in the demo are from the portfolio of fashion and beauty photographer Yulia Gorbachenko.

Source » Demo »

The Markup

Say we have a number of photos in our portfolio and they can be classified in these categories: Beauty, Hannah, On Fire, Traction, Wavelength or Hair. Let’s create a category filter to navigate through our photos. A simple unordered list will perfectly work:

<ul class="filter">
  <li class="current all"><a href="#">All</a></li>
  <li class="beauty"><a href="#">Beauty</a></li>
  <li class="hannah"><a href="#">Hannah</a></li>
  <li class="onfire"><a href="#">On Fire</a></li>
  <li class="traction"><a href="#">Traction</a></li>
  <li class="wavelength"><a href="#">Wavelength</a></li>
  <li class="hair"><a href="#">Hair</a></li>
</ul>

We assign classes equal to the category name to each list item for later use in jQuery. Additionally, we add one more list item “All” to view all portfolio items. We also assign the class "current" to this item because we want to show all portfolio items in the default view.

Now when we have our filter let’s move on and create one more list to hold our portfolio items:

<ul class="portfolio">
  <li data-id="id-1" data-type="hannah">
    <a href="images/hannah_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/hannah_yg_thumb.jpg" />
    </a>
  </li>
  <li data-id="id-2" data-type="hair">
    <a href="images/bianca_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/bianca_yg_thumb.jpg" />
    </a>
  </li>
  <li data-id="id-3" data-type="traction">
    <a href="images/heather_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/heather_yg_thumb.jpg" />
    </a>
  </li>
  ...
</ul>

Each list item contains the thumbnail image with an anchor tag around it. The anchor’s href attribute defines the URL of the full-size image and the rel attribute is necessary for the PrettyPhoto plugin that we will use later.

You may have also noticed that every list item has data-id and data-type attributes. Both are necessary for the Quicksand plugin. data-id is a unique identifier and data-type defines the category to which the portfolio item is assigned. Note that data-* is a perfectly valid HTML5 attribute.

The CSS

This isn’t a tutorial on CSS, so I won’t go into great detail about how to style the gallery. You can see my stylesheet in the source files attached to this post. I would just like to note that I have used several selectors and properties that are not supported in the earlier versions of IE.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in the head of our document. For the prettyPhoto plugin we also need to include prettyPhoto stylesheet that comes with the plugin:

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Next, when the document is loaded we initialize the prettyPhoto plugin. The prettyPhoto plugin accepts a number of parameters so you can easily customize it:

$(document).ready(function(){
  $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
    theme:'light_square',
    autoplay_slideshow: false,
    overlay_gallery: false
  });

Then we add some code to handle the Quicksand plugin:

var $portfolioClone = $(".portfolio").clone();
$(".filter a").click(function(e){
  $(".filter li").removeClass("current");
  var $filterClass = $(this).parent().attr("class");
  if ($filterClass == "all") {
    var $filteredPortfolio = $portfolioClone.find("li");
  } else {
    var $filteredPortfolio = $portfolioClone.find("li[data-type~="+$filterClass+"]");
  }

Quicksand works by comparing two collections of items and replacing them with a nice shuffling animation. By appending .clone() to our portfolio list and assigning it to $portfolioClone, we get a copy of the original list items that we will use later.
Once the link in the category filter is clicked, we want to remove the class current from the list item that has it and to determine which link has been clicked by taking the class value and assigning it to the $filterClass. In the case if the “All” link has been clicked, we want to show all of the portfolio items. Otherwise, we want to show only those list items that have data-type attribute with a value containing $filterClass.

    $(".portfolio").quicksand( $filteredPortfolio, {
      duration: 800,
      easing: 'easeInOutQuad'
    }, function(){
      $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
        theme:'light_square',
        autoplay_slideshow: false,
        overlay_gallery: false
      });
    });
    $(this).parent().addClass("current");
    e.preventDefault();
  })
});

Finally, we call quicksand. $filteredPortfolio which was assigned in the if statement contains filtered portfolio items that are to be displayed instead of the original portfolio items. We can also specify how long the animation will take, the easing type for the animation (don’t forget to include jQuery Easing Plugin for this) and other optional parameters. As the last argument we include a callback function to apply prettyPhoto on newly cloned portfolio items as well.

In the last lines of code we add the class current to the parent of the clicked link and call preventDefault() to prevent the browser jump to the link anchor.

With that our filterable portfolio is finished. I hope you enjoyed the tutorial and find it useful! I tried to explain everything as best as I can and if you have any questions, please feel free to ask.

Follow us on Twitter, or subscribe to RSS Feed for more tutorials and posts.

While previously described selectors select an element based on an element type or its attributes, combinator selectors allow you to select an element based on its relationship to other elements on... Read more→]]>

It is the second part of the post dedicated to CSS selectors. In Part 1 I explained the most common and simple selectors like type, ID, class and universal, as well as attribute selectors. In this part I will take a closer look at combinators, pseudo-classes and pseudo-elements.

Combinators

While previously described selectors select an element based on an element type or its attributes, combinator selectors allow you to select an element based on its relationship to other elements on the page. The most important relationships are:

• Ancestor. An element that wraps another element is its ancestor.
• Descendant. An element inside one or more elements is a descendant.
• Parent. A parent element is the closest ancestor of another element.
• Child. An element that is directly enclosed by another element is a child. Second generation and higher element is sometimes referred to as grandchild.
• Sibling. Two elements in the same parent are called siblings, and two elements immediately next to each other are adjacent siblings.

Ok, let’s take a closer look at each of the combinator selectors.

Descendant Selector

Represented by whitespace, descendant selector allows you to create style rules that are effective only when an element is the descendant of another one. The number of elements between the ancestor and descendant doesn’t matter. Consider the following example:

<ul id="main-nav">
  <li><a href="">Page Link 1</a></li>
  <li><a href="">Page Link 2</a>
    <ul>
      <li><a href="">Sub-page Link 1</a></li>	
      <li><a href="">Sub-page Link 2</a></li>	
    </ul>
  </li>	
  <li><a href="">Page Link 3</a></li>	
</ul>

The following rule matches all five li elements because each of them has element with an ID equal to main-nav as its ancestor:

#main-nav li { 
  background: url(icon.gif) no-repeat left top; 
  padding-left: 20px;
}

Compatibility: IE 6+, Firefox, Chrome, Safari, Opera.

Child Selector

Child selectors are similar to descendant selectors, but they select only children rather than all descendants. The combinator in a child selector is a greater-than sign (>). For example, if you applied the following CSS rule to the previous HTML fragment, only the list items in the outer list would be given an icon and padding, while list items with the links to sub-pages will remain unaffected:

#main-nav > li { 
  background: url(icon.gif) no-repeat left top; 
  padding-left: 20px;
}

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

Adjacent Sibling Selector

An adjacent sibling selector uses a plus sign “+” and matches the element that is the immediatelly following sibling of a given element. Consider the following markup:

<article>
  <h1>Article Title</h1>	
  <p>Some text...</p>	
  <p>Some text...</p>	
</article>

Say you want to give the first paragraph after each heading different formatting from the paragraphs that follow. The following adjacent sibling selector can help you achieve this:

h1 + p { color: #666; font-style: italic; }

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

General Sibling Selector

A general sibling selector is less strict. It matches elements that are siblings of a given element but elements do not have to appear immediately one after another. The combinator in this selector is a tilde sign (~).

h1 ~ p { color: #666; font-style: italic; }

If we applied the above CSS rule to the previous example both p elements would match the sibling selector h1 ~ p because both p elements are siblings to h1 element.

Compatibility: IE 7+, Firefox, Chrome, Safari, Opera.

Pseudo-Classes

A pseudo-class provides a way to select an element based on information that is not specified in the document tree. It always consists of a colon (:) followed by the name of the pseudo-class. No whitespace may appear before or after the colon.

The :link and :visited pseudo-classes

These two pseudo-classes represent the state of links. When unvisited as determined by the browser and its document history, a link can be selected with the :link pseudo-class, or when visited, it can be selected using the :visited pseudo-class. For example:

:link { color: #00f; }
:visited { color: #999; }

:link and :visited are mutually exclusive, that is they cannot be applied simultaneously to the same element. It should also be noted that browsers may treat all links as unvisited, or implement other measures to preserve the user’s privacy.

Compatibility: IE, Firefox, Chrome, Safari, Opera.

The :hover, :active and :focus pseudo-classes

These three can be used to style elements in response to user actions: :hover is applied when the user’s pointing device is over an element; :active is applied when an element is being activated by the user; :focus is applied when an element gains focus. For example, let’s style the states of an input element:

input { border:1px solid #999; color:#999; padding:3px; }
input:hover { border-color:#c99; color:#666; }
input:focus { border-color:#f00; color:#000; }
input:active { border-color:#f00; color:#f00; }

Compatibility: IE 6+ (:focus in IE 9+), Firefox, Chrome, Safari, Opera.

The :target pseudo-class

URIs with fragment identifiers (represented by the caharacter # followed by an anchor name or element ID) link to a certain element within the document, known as the target element. The :target pseudo-class selects the target element and lets you style it. Consider the following HTML fragment:

<ul>
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  ...
</ul>
<div id="section1">
  <p>Some text...</p>
</div>
<div id="section2">
  <p>Some text...</p>
</div>
...

Using the :target pseudo-class, you can easily highlight the section that the user wants to read:

div:target { border: 1px solid #ccc; background-color: #eee; }

Compatibility: IE 9+, Firefox, Chrome, Safari, Opera.

The :lang pseudo-class

The language pseudo-class allows you to style elements whose content is defined to be in a certain language. For example, article:lang(es) selects an article element in Spanish.

Compatibility: IE 8+, Firefox, Chrome, Safari, Opera.

The :not(X) pseudo-class

The negation pseudo-class :not(X) selects all elements except those that are given as the value of an argument (X). For example, the following rule matches all input elements except those with a type value of "email":

input:not([type="email"]) { border: 1px solid #999; }

Compatibility: IE 9+, Firefox, Chrome, Safari, Opera.

The :root pseudo-class

The :root pseudo-class applies one or more styles to the element that is the root element of the document. For HTML documents, this is always the html element.

Compatibility: IE 9+, Firefox, Chrome, Safari, Opera.

The :nth-child and :nth-of-type pseudo classes

The :nth-child(an+b) pseudo class selects elements that appear at a specific position within the list of its parent’s children. The position is defined via the pattern an+b, where you replace a and b by integer numbers (positive, negative, or zero) of your choice, and n is a counter starting at 0. The position can also be specified using keywords “even” (same as 2n) and “odd” (same as 2n+1).

:nth-of-type works exactly like the :nth-child pseudo-class, except that it only considers child elements of the specified type.

Take a look at these two rules:

article :nth-child(3n+1) { color: #999; }
article p:nth-of-type(even) { color: #999; }

Since n starts at 0 and increases by 1 each cycle, the first rule matches the 1st, 4th, 7th, and so on, child elements in an article element. And the second rule matches only even-numbered paragraphs in an article element.

Compatibility: IE 9+, Firefox 3.5+, Chrome, Safari.

The :nth-last-child and :nth-last-of-type pseudo classes

These two pseudo-classes accept the same arguments as :nth-child and :nth-of-type, except they are counted from the last element, working in reverse. Here is an example:

tr:nth-last-of-type(-n+2) { font-style: bold; }

The count starts at the last tr element in the table and counts up in reverse order, so the rule is applied to the last two rows in the table.

Compatibility: IE 9+, Firefox 3.5+, Chrome, Safari, Opera.

The :first-child and :last-child pseudo-classes

The :first-child and :last-child pseudo-class selectors represent the first and last children elements of some other element. They are equivalent to :nth-child(1) and :nth-last-child(1), respectively.

Compatibility: IE 7+ (:last-child since IE 9+), Firefox, Chrome, Safari, Opera.

The :first-of-type and :last-of-type pseudo-classes

The :first-of-type and :last-of-type pseudo-class selectors represent the first and last children elements of the specified element type. They are equivalent to :nth-of-type(1) and :nth-last-of-type(1), respectively.

Compatibility: IE 9+, Firefox 3.5+, Chrome, Safari, Opera.

The :only-child pseudo-class

This pseudo-class selects an element that has no siblings, i.e. it is the only child of its parent element. Any element selected by :only-child matches both the :first-child and :last-child selectors.

Compatibility: IE 9+, Firefox, Chrome, Safari, Opera.

The :only-of-type pseudo-class

The :only-of-type pseudo-class matches an element that has no siblings with the same element name. So it matches both the :first-of-type and :last-of-type selectors as well.

Compatibility: IE 9+, Firefox 3.5+, Chrome, Safari, Opera.

The :empty pseudo-class

The :empty pseudo-class targets an element that has no children, including text nodes. Comments and processing instructions don’t count as children. So the selector td:empty will match only the first td element in the following markup, as the other two contain a text node and a child element:

<tr>
  <td></td>
  <td>Some text...</td>
  <td><em></em></td>
</tr>

Compatibility: IE 9+, Firefox, Chrome, Safari, Opera.

The :enabled, :disabled and :checked pseudo-classes

These pseudo-classes are used to select user interface (UI) elements based on their current state. The :enabled pseudo-class represents UI elements that are in an enabled state, while :disabled represents UI elements that are in a disabled state. The following rules will apply different borders to text input elements depending on whether they are enabled or disabled:

input[type="text"]:disabled { border: 1px dotted #999; }
input[type="text"]:enabled { border: 1px solid #000; }

The :checked pseudo-class select UI elements (form controls such as radio buttons, check boxes) that are checked or toggled to the “on” state. For example:

input:checked {outline: 1px solid #f00;}

Compatibility: IE 9+, Firefox, Chrome, Safari, Opera.

Pseudo-Elements

Pseudo-elements target pieces of HTML that do not exist as standalone elements in the document tree. For example, you can use the first-letter pseudo-element to format the first letter of a paragraph differently, even though that first letter doesn’t have HTML tags wrapped around it.

CSS1 and CSS2 defined pseudo-elements with a single colon (:). To better distinguish pseudo-elements from pseudo-classes, in CSS3 pseudo-elements start with a double colon (::). However, to remain compatible most browsers (except IE7 and IE8) support both versions.

:first-letter pseudo-element

This pseudo-element targets the first letter (or digit) of a block-like elements such as block, inline-block, list-item, table-cell and table-caption. Here is a simple code fragment:

<article>
  <h1>Article Title</h1>	
  <p>Some text...</p>	
  <p>Some text...</p>	
</article>

The following selector allows you to style the first letter of each paragraph:

article p:first-letter { font-weight: bold; color: #f00;}

You can also use pseudo-class together with pseudo-element to style only the first paragraph in an article:

article p:first-of-type:first-letter { font-weight: bold; color: #f00;}

Compatibility: IE 6+, Firefox, Chrome, Safari, Opera.

:first-line pseudo-element

The :first-line pseudo-element selects the first line of a block-like element such as block, inline-block, table-caption or table-cell. The length of the first line depends on a number of factors, including the width of the the element containing the text, the font size, etc.

The following selector will match the first line of every p element in the previous example:

article p:first-line { text-transform: uppercase; }

Compatibility: IE 6+, Firefox, Chrome, Safari, Opera.

:before and :after pseudo-elements

The :before and :after pseudo-elements can be used to insert generated content before or after an element’s content. This content inherits properties from the element in the document tree to which they are attached. For example, say you want to add “Important!” before paragraphs with a class “important” to make them standout. You can do this using :before pseudo-element like this:

.important:before { content: "Important! "; color: #f00; }

If you decide to change your special message from “Important!” to, let’s say, “Note.”, then you can change every page on your site with one quick change in your style sheet. However, if the browser doesn’t support this pseudo-element, your special message will be invisible.

It also should be noted that the content generated using :before and :after pseudo-elements will not appear to search engines or screen readers, so you shouldn’t rely on it for anything vital.

Compatibility: IE 8+, Firefox, Chrome, Safari, Opera.

::selection pseudo-element

This CSS3 pseudo-element applies to the part of a document that has been highlighted by the user. For example, the following rule makes any selected text white on black background:

::selection { color: #fff; background-color: #000; }

The ::selection pseudo-element was removed from the current CSS3 draft.

This last selector ends up my overview of CSS selectors. Thanks for reading, and I hope you’ve found some helpful tips!

The code example to achieve this effect :