Best jQuery Portfolio Plugins & Tutorials with Demo

    MixItUp 2 : jQuery Animated Filtering & Sorting Plugin

    MixItUp 2 : jQuery Animated Filtering & Sorting Plugin

    MixItUp is a jQuery plugin providing animated filtering and sorting.

    MixItUp is great for managing any categorized or ordered content like portfolios, galleries and blogs, but can also function as a powerful tool for engaging application UI and data-visualisation.MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts.

    Rather than using absolute positioning to control layout, MixItUp is designed to work with your existing inline-flow layout. Want to use percentages, media queries, inline-block, or even flex box? No problem!

    bootFolio – jQuery Most Lightweight Portfolio Filtering

    bootFolio - jQuery Most Lightweight Portfolio Filtering

    bootFolio is the most lightweight (1.59KB) portfolio filtering jQuery script with css3 animation. it is highly optimize for bootstrap, and very easy to use.

    Features:

    • World most lightweight script for portfolio filtering (1.59KB)
    • Pure CSS3 transition, transform and animation
    • PrettyPhoto integrations
    • Very easy to use
    • Highly optimize for/with Bootstrap
    • Responsive/fluid/elastic supported

    50mm : Full Screen Portfolio jQuery WordPress Plugin

    50mm : Full Screen Portfolio jQuery Wordpress Plugin

    50mm Portfolio, a WordPress plugin that shows your portfolio in an interactive way. You can display portfolio by category, choose if single is FULL SCREEN or regular. Additionally, the plugin supports: Custom image size (percent), Custom link, Video, SoundCloud, Metro UI item, Unlimited colors and much more.

    Features:

    • Fully responsive
    • Video support
    • SoundCloud support
    • Custom link support
    • Unlimited colors
    • Smart hover color
    • Initial load number
    • Max Load more number
    • Easy drag and drop admin
    • Custom CSS support
    • Activate/Deactivate FULL SCREEN single page

    Creating a Border Animation Effect with SVG and CSS

    Creating a Border Animation Effect with SVG and CSS

    Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions.

    Metro – jQuery WordPress Grid Portfolio

    Metro - jQuery WordPress Grid Portfolio

    METRO – WordPress Grid Portfolio, a WordPress Plugin that shows your portfolio in an interactive way. You can display a single gallery, all galleries within a category and all galleries from multiple categories. Additionally, the plugin supports: Custom image size (percent), Custom link, Video, SoundCloud, Metro UI item, Unlimited colors and much more.

    Features:

    • Fully responsive
    • Load more (unlimited items)
    • Video support
    • SoundCloud support
    • Custom link
    • Metro Item
    • Unlimited colors
    • Smart hover color
    • Initial load number
    • Max Load more number
    • Easy drag and drop admin
    • Filterable portfolio
    • Display: One gallery, One Category, Multiple categories
    • Key navigation for the lightbox (Left/Right arrow and Esc)

    Klax – jQuery Responsive Team, Portfolio, Products Grid

    Klax - jQuery Responsive Team, Portfolio, Products Grid

    Display your work, team members, portfolio or anything else in an amazing and creative way. Klax is a multi-functional jQuery plugin that displays your content within the web page and offers everything that you will ever need to present your items to a client. You can set the number of items that display on a page and create your own design with this team member, portfolio JS plugin.

    Build a Responsive, Filterable Portfolio, with CSS3 Twists

    Build a Responsive, Filterable Portfolio, with CSS3 Twists

    The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward markup, CSS3 and a little bit of jQuery.

    Colio : jQuery Portfolio Content Expander Plugin

    Colio : jQuery Portfolio Content Expander Plugin

    Colio plugin will help you display details about your portfolio items in form of expandable viewport that can be placed above, below or inside your portfolio grid. This is great plugin for one-page and multipage sites, where you have to use space efficiently.

    Features:

    • Responsive
    • Mobile optimized
    • Includes black and white theme
    • Different placement options & dynamic inside placement
    • Inline or AJAX content
    • Content filters and callbacks
    • Easy integration in existing portfolio
    • Compatible with isotope and quicksand plugins
    • Autoscroll to view
    • Retina-ready navigation
    • Valid markup
    • JSHint compliant code

    jQuery Amazing Portfolio – WordPress Plugin

    jQuery Amazing Portfolio - WordPress Plugin

    Features:

    • Create Fully responsive portfolios
    • Control the number of columns for various screen resolutions and widths.
    • 25 unique and creative theme effects (More coming soon)
    • Unlimited colors and style.
    • Manage Unlimited Portfolios.
    • Control cross browsers CSS effects of various elements like borders, backgrounds, fonts, paddings, margins, alignments, colors, shadow etc.
    • Based on powerful Mixitup plugin
    • Images, video and audio support for portfolios
    • Fully customizable CSS and Style settings. Possible to customize or redesign all parts of portfolio from panel.
    • Responsive lightbox supports any media type like audio, video, external video, images, embeded codes and HTML codes.
    • Auto detect media in lightbox and keyboard support navigation
    • Control animation easing, animation effects and animation speed
    • Filterable portfolio with controllable animations.
    • 25 brilliant inbuilt demos
    • Create Audio file or Video file portfolio using default browser players

    Cube Portfolio : Responsive jQuery Grid Plugin

    Cube Portfolio : Responsive jQuery Grid Plugin

    Cube Portfolio is a powerful jQuery plugin that provides beautiful animated filtering, custom captions and it’s perfect for portfolios, galleries, team members, blog posts or any other ordered content.It plays nice with your existing HTML and CSS, making it a great choice for dynamic and responsive layouts.

    Features:

    • Responsive & centering layout
    • Fully customizable: more than 20+ options
    • You can add unlimited number of items
    • You can add items usign AJAX
    • Responsive built-in lightbox with support for images, youtube and vimeo.
    • Built-in single ajax page with support for any HTML
    • 6 starter templates
    • 10 animations for item grids
    • Filter by categories: group your entries by categories
    • Support for dropdown filtering
    • Lazy Loading function
    • Using CSS Animation with fallBack to jQuery
    • Powerfull API : init, destroy, filter, appendItems, showCounter
    • Adjustable speed, transition, easing and effects for each caption