Best jQuery Portfolio Plugins & Tutorials with Demo

    Portfoliojs : jQuery plugin to showcase your Portfolio

    Portfoliojs : jQuery plugin to showcase your Portfolio

    Portfoliojs is a lightweight jQuery gallery plugin for your beautiful images with horizontal scrolling which supports desktop, tablet and mobile browsers.

    Features:

    • smart pre-loading
    • set custom height & width of gallery
    • set custom easingMethods for slide animation
    • multiple gallery support
    • lightbox
    • keyboard navigation
    • renders according to the device width. including mobile devices.
    • supports touch devices (iPhone/iPad/Android) swipe-to-slide

    jQuery Logos Showcase Pro – Grid – Carousel – Perspective

    jQuery Logos Showcase Pro - Grid - Carousel - Perspective

    Logos Showcase Pro contains 4 versions: Grid, Carousel (one by one), Carousel (Group) and Perspective. The last 3 versions have 2 skins: black & white. It allows you to easily display on your website: logos, clients, partners, sponsors, brands, portfolio items… you name it.

    Features:

    • touch screen navigation support for mobile
    • responsive design – available parameter to disable responsive behaviour
    • tooltip – available parameter to activate/deactivate the tooltip.
    • border – you can set the border size and border color for active and inactive image.
    • grayscale – available parameter to activate/deactivate the grayscale.
    • auto-play – you can define the time (in seconds) until the auto scroll will take place. If you set it 0 the plugin will not auto play.
    • external url link parameter for each image
    • target parameter: _blank or _self
    • multiple js options from where you can customize the plugin.
    • you can insert multiple instances in the same page with the same skin or using a different skin.

    Blueprint Split Layout with CSS3 & JavaScript

    Blueprint Split Layout with CSS3 & JavaScript

    This Blueprint is a layout with two sides, sometimes seen in portfolio websites of couples and partners. The idea is to show an initial two-sided view and when clicking on a side, the whole page transitions into the respective direction. The individual page of the selected person is shown.

    The Blueprint comes with some example media queries and a second demo where the disappearing side scales down. It will work in modern browsers (from IE9 on).

    Filterize Responsive CSS3 Portfolio Gallery

    Filterize Responsive CSS3 Portfolio Gallery

    Filterize. CSS3 portfolio gallery is made to present your projects, images and references with ease and style.

    Features:

    • Clean design and commented code
    • Easy to customize to fit your design and color pallete
    • Made with pure CSS3 and HTML5
    • Responsive and adaptive to various screen sizes
    • Category filters
    • 3 ready themes
    • 4 column layouts for each theme
    • 2 columns
    • 3 columns
    • 4 columns
    • Full width layout
    • Animated overlays
    • Quick links for better user experience
    • Lightbox for detailed image and project presentation
    • Lightbox navigation
    • Custom scrollbars

    Puzzllerry : Interactive jQuery gallery plugin

    Puzzllerry : Interactive jQuery gallery plugin

    Puzzllerry is plugin that allows you to create interactive gallery/portfolio/menu or any element with listed items. It has extremly simple markup and requires only 1 line of js code to turn it on.It will make your website more attractive, it will gain some focus of your visitor as user may ‘play’ with it.

    And of course its responsive.

    jQuery Multi Purpose Media Boxes – Responsive Grid

    jQuery Multi Purpose Media Boxes - Responsive Grid

    This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
    The navigation filter bar is generated automatically from the categories you specify to each image.

    Features:

    • Fully responsive grid and lightbox
    • Lazy Load Feature
    • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
    • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
    • Set the number of images to load at start and when you click the “load more images” button
    • Support thumbnails for the grid only to the images you want to improve performance
    • Fully Responsive Grid and Lightbox
    • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
    • You can specify a static width for each column or specify number of columns
    • When specifying the number of columns you can set the minimum width for each column
    • CSS3 Effects
    • Direction aware hover effect
    • Lightbox with slideshow (play, pause, auto-play)
    • Easy implementation
    • Compatible with Twitter Bootstrap

    Create a Pentagon Hover Effect with CSS3 and jQuery

    Create a Pentagon Hover Effect with CSS3 and jQuery

    This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.

     

    jQuery Responsive Portfolio Gallery

    jQuery Responsive Portfolio Gallery

    Responsive Fully Customizable jQuery Portfolio Gallery. Image preloading

    jQuery Stretch Gallery with XML

    jQuery Stretch Gallery with XML

    Stretch Gallery is a XML Canvas Gallery that allows you to create a nice portfolio gallery with some nice effects and customization settings.

    Horizontal Portfolio Layout with CSS3 Animations & jQuery

    Horizontal Portfolio Layout with CSS3 Animations & jQuery

    In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects inspired. The website is made in Flash, so I thought it would be nice to recreate the flash hover effect of the portfolio items using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.

    I’ve also added a simple falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.