HTML5 and jQuery filter images Portfolio

we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

The HTML

The first step is to write down the markup of a new HTML5 document. In the head section, we will include the stylesheet for the page. The jQuery library, the Quicksand plugin and our script.js will go right before the closing body tag:

index.html

Making a Beautiful HTML5 Portfolio | Tutorialzine Demo

My Portfolio

In the body, there are a number of the new HTML5 elements. The header holds our h1 heading (which is styled as the logo), the section element holds the unordered list with the portfolio items (more lists are added by jQuery, as you will see later), and the nav element, styled as a green bar, acts as a content filter.

The #stage unordered list holds our portfolio items. You can see what these items should look like below. Each of them has a HTML5 data attribute, which defines a series of comma-separated tags. Later, when we use jQuery to loop through this list, we will record the tags and create categories that can be selected from the green bar.

  • You can put whatever you want in these li items and customize the portfolio further. The Quicksand plugin will handle the animated transitions of this list, so you are free to experiment.

    The jQuery

    What the Quicksand plugin does, is compare two unordered lists of items, find the matching LIs inside them, and animate them to their new positions. The jQuery script we will be writing in this section, will loop through the portfolio items in the #stage list, and create a new (hidden) unordered list for each of the tags it finds. It will also create a new menu option, which will trigger the quicksand transition between the two lists.

    First we need to listen for the ready event (the earliest point in the loading of the page where we can access the DOM), and loop through all the li items detecting the associated tags.

    script.js – Part 1

    $(document).ready(function(){

    var items = $('#stage li'),
    itemsByTags = {};

    // Looping though all the li items:

    items.each(function(i){
    var elem = $(this),
    tags = elem.data('tags').split(',');

    // Adding a data-id attribute. Required by the Quicksand plugin:
    elem.attr('data-id',i);

    $.each(tags,function(key,value){

    // Removing extra whitespace:
    value = $.trim(value);

    if(!(value in itemsByTags)){
    // Create an empty array to hold this item:
    itemsByTags[value] = [];
    }

    // Each item is added to one array per tag:
    itemsByTags[value].push(elem);
    });

    });

    Each tag is added to the itemsByTags object as an array. This would mean that itemsByTags['Web Design'] would hold an array with all the items that have Web Design as one of their tags. We will use this object to create hidden unordered lists on the page for quicksand.

    It would be best to create a helper function that will handle it for us:

    script.js – Part 2

    function createList(text,items){

    // This is a helper function that takes the
    // text of a menu button and array of li items

    // Creating an empty unordered list:
    var ul = $('

    Leave a comment