Which Portfolio template do you like? Great portfolio in HTML5 Html studio template with portfolio

First, let's mark up the new HTML5 document. In the header section, enable the page style. JQuery library, Quicksand plugin and our file script.js will be included before the closing body tag:

index.html

My portfolio

The HTML5 header element contains our h1 header (which is styled like a logo). The section element contains an unordered list of portfolio items (other lists are added by jQuery code) / The nav element, styled as a green bar, acts as a content filter.

The unordered list #stage contains our portfolio items. Each item has a data attribute that defines a series of comma-separated labels. Later in the jQuery code, we loop through the list, write labels, and create categories that can be selected on the green menu bar.

    • You can put other works in the list of items and use other labels.

    jQuery

    The Quicksand plugin compares two unordered lists, finds the same li in them, and animates the ordering process. The jQuery script for this part of the tutorial loops through the portfolio items in the #stage list and creates new (hidden) unordered lists for each tag it finds. These lists will then be used to run the Quicksand plugin.

    After loading the page, we run a loop to detect the labels.

    script.js - Part 1

    $ (document) .ready (function () (var items \u003d $ ("# stage li"), itemsByTags \u003d (); // Loop through all li items: items.each (function (i) (var elem \u003d $ ( this), tags \u003d elem.data ("tags"). split (","); // Add the data-id attribute. Required by the Quicksand plugin: elem.attr ("data-id", i); $ .each ( tags, function (key, value) (// Remove extra spaces: value \u003d $ .trim (value); if (! (value in itemsByTags)) (// Create an empty array for items: itemsByTags \u003d;) // Each item added to one array by label: itemsByTags.push (elem);));));

    Each label is added to the itemsByTags object as an array. This means itemsByTags ["Web Design"] will contain an array of all items that are labeled "Web Design". We use this object to create a hidden unordered list on the page for the Quicksand plugin.

    Let's create helper functions

    script.js - Part 2

    Function createList (text, items) (// A helper function that gets the text of the menu button and // an array of items li // Create an empty unordered list var ul \u003d $ ("

    © 2020 Mobile and Computer Gadgets