Jquery плагин для портфолио. Галерея ввиде портфолио

Наверное каждому разработчику попадался заказ по созданию и организации портфолио. Лично мне весьма нравятся такие заказы, ведь заказчик хочет чего-то оригинального, и тут необходима фантазия и проявления творческой сноровки. Не знаю как вам, но мне не хочется делать одинаковые шаблоны всем заказчикам. Надо делать дизайн, друзья мои, такой, чтобы вам не было за него стыдно. Ведь если ваше творение, в данном случае, к примеру, портфолио, поразит заказчика, то он вас наверняка порекомендует своим знакомым. А вам это только на пользу.

ИСХОДНИКИ

В данном уроке мы рассмотрим весьма интересный способ реализации галереи миниатюр для портфолио. Несомненно данную галерею можно использовать не только для портфолио, а для прочих, креативных, проектов. И так, приступим.

Нам необходимо создать список в виде неупорядоченного списка, и заключим это все в единый элемент Div, это оболочка будет использоваться для отображения сетки миниатюр изображений, стили будут созданы с помощью javascript, по этому css будут достаточно простыми. В этом уроке я использую удивительные изображения с dribbble , размещенные Troy Cummings:

У нас будут содержаться атрибуты подписи для изображений, следующий код это результат построения генерируемой разметки с помощью JavaScript:

Dump Truck Rrwooo

С разметкой мы в небольшой мере, надеюсь, разобрались, переходим к следующему шагу.

Изображения у нас будут выводится сеткой, нам необходимо задать общие параметры построения сетки добавить немного прозрачного диапазона черного фона, теней, Также мы установим 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); }

Для начала нам необходимо определить некоторые переменные для навигации:

navigation.on("click", function(e) { e.preventDefault(); navigation.removeClass("selected"); $(this).addClass("selected"); page = $(this).attr("data-page"); for(var i = 0; i

В head секции, мы имеем стили плагина - timeline.css и styles.css, которые будут содержать наши дизайнерские решения. В конце страницы мы подключаем jQuery библиотеку, timeline плагин и scripts.js, который будет инициализировать работу плагина.

Когда мы вызываем плагин, он находит DIV блок с ID=timeline. Внутрь блока монтирует html разметку, после чего страница становиться следующей:

Johnny B Goode

Designer & Developer

Nature at its finest in this video.

Так как мы будем вносить некоторые изменения в CSS стили, код выше дает лучше понять, как устроена структура портфолио. Заметьте, мы не будем изменять стандартные стили плагина, мы только перепишем некоторые атрибуты в собственном css файле. Это дает нам преимущество в последующих изменениях дизайна портфолио.

Написание CSS мы будем обсуждать подробно, но немного позже. Единственное, нам придется переписать все указания поверх существующих, но с этим разберемся далее.

Чтобы инициализировать плагин, нам нужно вызвать VMM.Timeline() метод:

$(function(){ var timeline = new VMM.Timeline(); timeline.init("data.json"); });

Метод init принимает простой аргумент - ресурс данных. Это может быть json файл, как в коде выше, или Google spreadsheet.

Чтобы более подробно узнать, как устроен data. json, скачайте исходники урока. Здесь нет ничего сложно, нет необходимости описывать структуру этого файла.

С помощью Firebug HTML Inspector, можно определить селекторы к HTML элементу, которые прописаны в timeline.css. После чего, используя такие же селекторы, можно присвоить свои стили в файле styles.css. В некоторых случаях, я использовал ! important , чтобы придать приоритет собственным стилям.

Все изменения, которые вы увидите ниже, дописаны вручную с помощью CSS стилей. Остальные элементы стилей установлены плагином по умолчанию.

Первым делом, после стилизации страницы в общем, мы изменим фон портфолио:

#timeline{ background:none; } /* The individual events in the slider */ .slider .slider-container-mask .slider-container{ background:none; } /* Setting a custom background image */ #timeline div.navigation{ background: url("../img/timeline_bg.jpg") repeat; border-top:none; }

Чтобы создать 3D эффект, в навигационном блоке, нам придется использовать . Элемент:after - это темная верхняя часть, он использует линейный градиент, чтобы придать эффект объема.

#timeline div.navigation:before{ position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") repeat; } #timeline div.navigation:after{ position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%); }

#timeline div.timenav-background{ background-color:rgba(0,0,0,0.4) !important; } #timeline .navigation .timenav-background .timenav-interval-background{ background:none; } #timeline .top-highlight{ background-color:transparent !important; }

Стилизируем zoom-in и zoom-out кнопки на тулбаре:

#timeline .toolbar{ border:none !important; background-color: #202222 !important; } #timeline .toolbar div{ border:none !important; }

Стиль шкалы внизу:

#timeline .navigation .timenav .time .time-interval-minor .minor{ margin-left:-1px; } #timeline .navigation .timenav .time .time-interval div{ color: #CCCCCC; }

Стрелки на предыдущее и следующее событие:

Slider .nav-previous .icon { background: url("timeline.png") no-repeat scroll 0 -293px transparent; } .slider .nav-previous,.slider .nav-next{ font-family:"Segoe UI",sans-serif; } .slider .nav-next .icon { background: url("timeline.png") no-repeat scroll 72px -221px transparent; width: 70px !important; } .slider .nav-next:hover .icon{ position:relative; right:-5px; } .slider .nav-previous:hover, .slider .nav-next:hover { color: #666; cursor: pointer; } #timeline .thumbnail { border: medium none; }

Фон загрузки:

#timeline .feedback { background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; } #timeline .feedback div{ color: #AAAAAA; font-size: 14px !important; font-weight: normal; }

#timeline .slider-item h2, #timeline .slider-item h3{ font-family:"Antic Slab","Segoe UI",sans-serif; } #timeline .slider-item h2{ color:#fff; } #timeline .slider-item p{ font-family:"Segoe UI",sans-serif; } #timeline .slider-item img, #timeline .slider-item iframe{ border:none; }

В конце, мы изменим обложку. Я использовал nth-child(1), чтобы ссылаться только на первый слайд (обложку), который содержит назвние и описание портфолио. Эти данные храняться в JSON файле.

/* Customizing the first slide - the cover */ #timeline .slider-item:nth-child(1) h2{ font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:10px 5px 5px 20px; position:relative; right:-60px; z-index:10; } #timeline .slider-item:nth-child(1) p i{ font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; } #timeline .slider-item:nth-child(1) p .c1{ color:#1bdff0; } #timeline .slider-item:nth-child(1) p .c2{ color:#c92fe6; } #timeline .slider-item:nth-child(1) .media-container { left: -30px; position: relative; z-index: 1; } #timeline .slider-item:nth-child(1) .credit{ text-align: center; }

Осталось только открыть timeline.psd, который прикреплен в файле плагина, и изменить цвет некоторых иконок. Я добавил все необходимые файлы в исходники к этому уроку. На этом создание jQuery портфолио со стилизацией на CSS3 завершено!

Вы можете использовать это портфолио не только для отображения последних проектов, но также интересных и важных моментов вашей карьеры. Это как мини дневник вашей жизни! Надеюсь, вам понравился этот урок. Поделитесь своими мыслями в комментариях ниже.

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.

Lunar – 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.