jQuery portfolio plugins enable you to display your portfolio in an elegant style and help you to impress your clients to get more exposure and business deals.
You can’t under estimate the power of a portfolio if you are working in service providing sector. Portfolios not only display your work but give an idea to your client of your working experience which results in more deals and business.
Below you will find some of the best jQuery portfolio plugins to display your artwork online. If you are aware of any other plugin, please let us know we would love to update the list.
1. LunarLunar – Photography Portfolio, a very clean and simple jQuery Plugin that helps you build beautiful photo albums. Some of the plugin’s strong points are: fully responsive grid, high performance, modern look & feel, clean and spacious design.
Media Boxes Portfolio is a featured jQuery grid plugin that allows you to display all kind of content in a highly powerful grid. Use it for blog posts, display media, clients, portfolios, shopping carts, galleries and all you can imagine.
The idea of Colio – jQuery Portfolio Content Expander Plugin is to display details about your portfolio items on the same page in form of expandable viewport that can show up above, below or inside your portfolio grid. Colio includes black and white theme for quick start and can be easily integrated in existing portfolio. Also it’s compatible with popular filtering plugins like isotope and quicksand and works on tablets and mobile devices.
DZS ZoomFolio is the ultimate plugin for displaying your creative portfolio to your clients and that’s not all. You can use it to show the recent posts from your blog or a gallery from your vacation.
Metro – jQuery Grid Portfolio, a very clean and simple jQuery Plugin that shows your portfolio in an interactive way. Some of the plugin’s strong points are: fully responsive grid, easy to set up, high performance, modern look & feel, clean and spacious design.
This item comes with over 40 super customizable layouts and 19 hover styles to choose from. Tons of ready to use options make it very easy to add borders, backgrounds, different meta styles and so on. With this much of ready to use functionality you can easily build all kinds of portfolio or gallery lists.
bootFolio is the most lightweight portfolio filtering script with css3 animation. it is highly optimize for bootstrap, and very easy to use. Bootfolio comes with 76+ portfolio item layout, 14 replacing animations, 167+ item hover effects, lightweight, highly customizable and much more.
Tonic Gallery is a that allows you to create very easily a portfolio gallery with some nice effects and flexible customization settings. This plugin includes plethora of options like pagination, category filter, data management, lightbox preview, and flexible configuration.
Alfred helps web developers to build the best portfolios and the most beautiful galleries. It dramatically simplifies the whole process and offers you wide range of features and options.
It’s a that means every gallery can have one or more sub galleries. It’s perfectly suitable for portfolio gallery. It’s fully responsive and also usable for other purposes like navigation, galleries etc. This plugin has responsive design, 5 layouts, browser compatible, metro and iOS7 inspired.
An experimental web layout where several image columns get animated out when a menu item is clicked.The idea is based on the current trend of a grid layout where the columns are animated. In our demo, we animate a decorative image grid and make the columns move away in an alternating way, revealing some content underneath. We use a playful hover effect for the menu items and mimic the animating when they fly away. We also added some slight mouse move interaction for the columns.
Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails.
Today we’d like to share a little artsy effect with you. The idea is to show a fast fullscreen preview of images when hovering over a special link. In our demo we use the concept of a photographer’s website where the link to their works triggers the effect. On hover, some photos are shown rapidly in a loop. Once the link is clicked, the current image scales down and moves to its place in the grid. The animations are made using TweenMax.
Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax .
DoFilter is a Full Responsive Bootstrap Multipurpose Filtering and Shorting plugin built on Latest Version of Bootstrap Framework (v3.3.7), HTML5, CSS3 and jQuery. Its wonderful features can be used to Filtering and Shorting your website content as like Portfolio, Service, Team, Blog, Products, Pricing, FAQ etc. Also you can customize it for Filtering and Shorting any your website content.
jQuery filter plugin is a must have element for any kind of website which through you will be able to present portfolio works fantastically. Here I am going to show you some of the best free & premium filter jquery portfolio plugins. These plugins can be used for business, corporate, creative, portfolio or any other related to portfolio works showcasing purposes.
I assume you are a web designer & finding a best portfolio filterable jquery gallery plugin for your next project. If I am right then you are in the right place. You will find here some best free & premium filter jQuery plugins. As a web designer I also used lots of time these types of plugins into my project for fulfill my client’s requirements.
Most of the theme you will see portfolio filtering gallery where anyone can display their works. It’s a great way to present portfolios at this time. These plugins below have all those features that can be fulfill your requirements as well. Some features I must mention for you if you don’t have enough knowledge about jquery filter plugins
.
Most of the plugins are responsive, comes with multiple filtering animations & effects, unique css3 animations, beautiful hover effects, some plugins are expandable & also each item has separate carousel slider which through you can showcase more images. If you want to see a demo then you can view our Bootstrap template which is we released for our users for 100% free. We added the Elastic Grid filterable plugin into SinglePro which you will find below. Hope this collection will help you to find a best jquery filterable plugin. If you found this helpful & think it can be helpful for others then don’t hesitate to share this collection in social media. Thank You!
Free Filter/Filterable Plugins Isotope – Filter & sort magical layouts Jquery Plugins
Isotope is a well know jquery filter plugin in the web. This filtering will allow you to implement an amazing smooth filtering gallery into your website or template. Most of the web designer used this plugin into their projects. It’s free for open source & personal use only. If you use this plugin for commercial projects then you have to purchase a commercial license.
Mixitup – Free Animated Filtering And Sorting Jquery Plugins
Mixitup is another excellent filtering jquery plugin which can be perfectly used for any kind of portfolio galleries, image galleries & any other filtering gallery purposes. It has beautiful & unique filtering animation with smoothness. Mixitup is an open source project under Creative Common license . You can use it for personal or open source projects. If you want to use it for your commercial projects then you must purchase a commercial license.
Shuffle – Jquery free Responsive Filtering And Sorting Plugins
Shuffle is an amazing free filter jquery plugin which is inspired by the most popular filter plugins Isotope & Packery. If you are looking for a jquery filtering for showcasing your portfolios beautifully then Shuffle can be your right choice. It’s a free jquery portfolio filter plugin.
Elastic Grid – Responsive JQuery Portfolio filter Plugin
Elastic Grid is a fantastic free js filter plugin which will allow you to add an expandable filtering gallery for showcasing any kind of portfolios. It has beautiful filter animation. Each item also has a carousel slider with text contents. By using Elastic Grid you can give a extra powerful & unique look into your project.
jPList – Free flexible jQuery plugin for sorting, pagination and filtering
jPlist is a advance jquery filtering plugin which is giving some advance features for filtering any kind of data. You can filter or short data’s by pages, pagination, searches etc.
Quicksand – Free reordering and filtering items jquery Plugin
Create a filterable gallery using Quicksand. This plugin allow you to filter your contents by name, size & types. It has beautiful filtering animation which can be present your contents nicely. It’s a completely free jquery filter plugin.
Filtrify – Advanced tag filtering free jquery Plugin
Filtrify is a fantastic sorting & filtering plugin which is comes with advance search functionality. It builds with html5 & jQuery. It has run time search functionality. You will be able to filter your contents by category. Not only that, also you can show how many contents are available in each category.
Content Filter – CSS3 and Jquery Powerful Filter Plugin Free
It’s an amazing content filter jquery plugin which comes with some advance & fantastic features. You can filter your content by category, checkbox & radio buttons. It also has a run time search functionality which through you can filter your contents on fly. This can be used for any kind of content or portfolio filtering gallery.
Portfolio – Free Interactive and Filterable Jquery Plugin
Are you creating a website template? Want to add a filterable portfolio gallery for showcasing portfolio works? Then this plugin will exactly do this for you. You can filter your images, portfolios, your amazing works by using this plugin. It is easy to implement & can be perfectly used for portfolio filtering gallery.
jQuery ListNav – Free letter based jQuery Filtering Plugin
ListNav is a simple plugin which can be used for filtering listed content. If you have lots of contents in a list style & want to add a simple filtering functionality for those contents then ListNav is perfect for you. This plugin has no animation. It will just simply filter you contents in listing view.
It’s not a filtering gallery plugin like isotope, Mixitup. It’s a fantastic real time jquery search filter plugin. You will be able to add real time search functionality with text highlighting into your website by using this plugin.
jQuery TickBack – Animated List filtering free jQuery Plugin
Add a simple filterable image or content gallery by using TickBack. It can be used for filtering portfolio works or any other related to showcasing any kind of galleries. It’s a simple lightweight portfolio filter jquery plugin which is comes with a nice shuffle animation.
Guggenheim – Animated filtering, reordering and pagination free Plugin
Guggenheim is comes with tons of filtering features which through you can implement an excellent image or content filter gallery. This plugin packed with a slider means you are not only able to add filter functionality also you can add a slider for your content gallery. You can filter your contents in some multiple ways like category, checkbox, radio buttons etc with a carousel slider.
Premium Filter/Filterable Plugins Colio – Content Expander jQuery Portfolio Filter Plugin
Colio is not only a simple jquery filter plugin. It comes with a modern & unique design. You will be able to implement a filterable gallery with item expander which is also have a carousel content slider & images with lightbox. If you are designing a business, corporate or portfolio website then this is a must have plugin for your project. Your project will be more creative & powerful by implementing this portfolio filter jquery plugin.
Magnet – Layouts jQuery Filter plugin
Magnet is a very nice jquery layout filter plugin which through you will be able to create filterable layouts. It comes with smooth filtering animation & effects. This plugin can filter & adapt your layouts fantastically in any kind of viewport.
bootFolio – Most Lightweight Portfolio Filtering jQuery Plugin
BootFolio is a bootstrap compatible portfolio filter plugin which is build with pure css3 animations. It’s very easy to use & lightweight. It comes with 14+ filtering animation, 76+ portfolio item layouts, 167+ portfolio item hover effects, 10+ options for setting up properly.
Cube Portfolio – Responsive jQuery Grid Filter Plugin
Cube can be your best choice for your portfolio gallery filtering. It comes with extensive features. You will be able to setup multiple style filtering functionality into your project. You can show how many contents available in each category alone with the category item & popover also. This plugin packed with carousel slider, testimonial slider, 15 ready to use templates, css3 animations, responsive design, grid & slider layouts, tabs, masonry, lightbox gallery & much more.
Live Swear – Comments Words Filter jQuery Plugin
Megafolio is amazingly designed & developed js filtering plugin which can be used for multiple purposes like portfolios, blogs, galleries shops etc. It has drag & drop visual skin editor, 30+ pre-made skins, responsive grid & lots more.
Nova Gallery – Responsive HTML5 Multimedia Filter Gallery Plugin
Nova is a beautiful image gallery jquery plugin. You can create image gallery for any kind of portfolio works in thumbnail or fullwidth view. It’s fully responsive & easy to implement.
Dimension – 3D Animation Filter Portfolio Gallery Plugin
It’s a beautiful & uniquely created portfolio filter plugin which through you can showcase your awesome works in such a nice way. If you are creating a website template for business, creative, corporate, portfolio then showcasing portfolio is the must element you need to implement. So by using Dimension filter plugin you can do that perfectly.
Preview More Info WP Version 450 Hazel H https://www..png Hazel H 2015-02-13 19:07:19 2016-12-15 20:17:20 30+ Brilliant Portfolio jQuery Filter Plugins Free & Premium
Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки. Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.
ИСХОДНИКИ
В данном уроке мы рассмотрим весьма интересный способ реализации галереи миниатюр для портфолио. Несомненно данную галерею можно использовать не только для портфолио, а для прочих, креативных, проектов. И так, приступим.
Шаг 1. HTMLНам необходимо создать список в виде неупорядоченного списка, и заключим это все в единый элемент Div, это оболочка будет использоваться для отображения сетки миниатюр изображений, стили будут созданы с помощью javascript, по этому css будут достаточно простыми. В этом уроке я использую удивительные изображения с dribbble , размещенные Troy Cummings:
У нас будут содержаться атрибуты подписи для изображений, следующий код это результат построения генерируемой разметки с помощью JavaScript:
Dump Truck Rrwooo
С разметкой мы в небольшой мере, надеюсь, разобрались, переходим к следующему шагу.
Шаг 2. CSSИзображения у нас будут выводится сеткой, нам необходимо задать общие параметры построения сетки добавить немного прозрачного диапазона черного фона, теней, Также мы установим display на none.
#portfolio-item { display: none; } #portfolio { margin: 2em 0 1em; transform-style: preserve-3d; } #portfolio div { display: inline-block; position: relative; vertical-align: top; margin: 1em; width: 200px; height: 150px; box-shadow: 0px 0px 25px rgba(0,0,0,.3); } #portfolio div span { text-align: left; position: absolute; color: #fff; background: rgba(0,0,0,0.6); width: 90px; padding: 5px 15px 7px; z-index: 1; left: -10px; bottombottom: 10px; }
Нам необходимо добавить класс анимации который будет использоваться при переходе на другую страничку. Мы будем вращать изображения на 360 градусов. относительно осей Х и Y.
Animated { transition: .9s ease-out; } .flipped-horizontal-rightright { transform: rotateY(360deg); } .flipped-horizontal-left { transform: rotateY(-360deg); } .flipped-vertical-top { transform: rotateX(360deg); } .flipped-vertical-bottombottom { transform: rotateX(-360deg); }
Шаг 3. JavaScriptДля начала нам необходимо определить некоторые переменные для навигации:
navigation.on("click", function(e) { e.preventDefault(); navigation.removeClass("selected"); $(this).addClass("selected"); page = $(this).attr("data-page"); for(var i = 0; i
