Плагин jquery для портфолио. Галерея ввиде портфолио. Вот и все. Готово

В этом уроке мы напишем красивое портфолио, с использованием jQuery, CSS3 и плагина Timeline. Timeline - это jquery плагин, который специализируется на отображении хронологии событий. В этом портфолио вы можете вставлять разные типы медиа данных: твиты, видео, карты, картинки, записи, и после расставлять их в соответствии с датой. Если поработать над дизайном, то получится красивое портфолио, которое будет отображать ваши интересы и работы.

HTML

Стандартно, Timeline плагин содержит легкую цветовую схему. Это очень удобно и необходимо в большинстве случаев. Хотя, для нашего портфолио, темный дизайн более элегантен. Поэтому мы оптимизируем его так, как нам нравиться.

Для начала давайте посмотрим на базовую html разметку страницы:

index. html

Timeline Portfolio | Tutorialzine Demo

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

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

Johnny B Goode

Designer & Developer

March 2009 My first experiment in time-lapse photography

Nature at its finest in this video.

March 2010 Logo Design for a pet shop July 2009 Another time-lapse experiment

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

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

jQuery

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

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

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

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

CSS

С помощью 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 завершено!

Что с этим делать?

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

Грамотно составленное и визуально оформленное , в нашем случае, это отдельная страница, является важным элементом личного сайта или блога, любого специалиста, достигшего определенного уровня мастерства в своей профессиональной деятельности.
Страница портфолио, это такой своеобразный отчет, или визуальное резюме, с помощью которого, вы сможете наглядно продемонстрировать читателям и посетителям сайта/блога, набор наиболее удачных реализованных работ, будь-то фотографии, статьи, публикации, элементы дизайна и т.п.
У меня такой странички нет и, это с моей стороны, досадное упущение, которое нужно, как можно скорее исправить, над чем собственно в данный момент и работаю.
На бескрайних просторах глобальной сети, можно найти огромное количество готовых шаблонов страниц для организации портфолио, и разнообразие таких страничек, по-настоящему впечатляет. Так что, кому в лом вникать во все тонкости веб-дизайна и разработки, всегда смогут найти подходящий для себя вариант. Ну, а для страждущих познаний в сайтостроительстве, предлагаю разобрать пример адаптивной верстки, простой страницы портфолио, с фильтрацией выполненных работ по категориям, выполненной на , разбавленной привлекательным эффектом перехода, с элементами анимации .

Макет странички, исполняемый javascript и некоторые элементы оформления, выдал «на гора», замечательный веб-дизайнер и разработчик Kevin Liew (queness.com). При выборе оптимального решения, для меня было важно, это простота исполнения, функциональность плагина jQuery, корректная работа во всех современных браузерах, и учитывая всевозрастающую популярность использования различных мобильных устройств, для интернет-серфинга, адаптивность дизайна будущей страницы. Никаких вычурных, дизайнерских наворотов и тяжеловесных плагинов.

Базовый макет состоит из двух основных элементов пользовательского интерфейса, которые нам предстоит построить, это навигации по вкладкам для фильтрации категорий представленных работ, и сама сетка миниатюр с эффектом всплывающей подписи при наведении.
Для начала, чтобы все в итоге заработало, будет необходим jQuery не ниже версии 1.7.0. Если он у вас еще не подключен, то добавьте следующую строку перед тегом :

Запустите плагин MixItUp в работу, этот код вставьте после вышеуказанных файлов:

< script type= "text/javascript" > $(function () { var filterList = { init: function () { $("#portfoliolist" ) . mixitup({ targetSelector: ".portfolio" , filterSelector: ".filter" , effects: [ "fade" ] , easing: "snap" , // call the hover effect onMixEnd: filterList. hoverEffect() } ) ; } , hoverEffect: function () { $("#portfoliolist .portfolio" ) . hover( function () { $(this) . find(".label" ) . stop() . animate({ bottom: 0 } , 200 , "easeOutQuad" ) ; $(this) . find("img" ) . stop() . animate({ top: - 30 } , 500 , "easeOutQuad" ) ; } , function () { $(this) . find(".label" ) . stop() . animate({ bottom: - 40 } , 200 , "easeInQuad" ) ; $(this) . find("img" ) . stop() . animate({ top: 0 } , 300 , "easeOutQuad" ) ; } ) ; } } ; filterList. init() ; } ) ;

$(function () { var filterList = { init: function () { $("#portfoliolist").mixitup({ targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing: "snap", // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { $("#portfoliolist .portfolio").hover(function () { $(this).find(".label").stop().animate({bottom: 0}, 200, "easeOutQuad"); $(this).find("img").stop().animate({top: -30}, 500, "easeOutQuad"); }, function () { $(this).find(".label").stop().animate({bottom: -40}, 200, "easeInQuad"); $(this).find("img").stop().animate({top: 0}, 300, "easeOutQuad"); }); } }; filterList.init(); });

Отдельно рассматривать все опции плагина, смысла нет, по умолчанию выставлен довольно оптимальный вариант. Ну, если уж кого вставит на эксперименты с параметрами, пожалуйста, все в ваших силах.

Для формирования макета страницы и внешнего вида элементов, подключаете к документу парочку файлов . , один для базовых стилей, обзовем его например: layout.css и еще один маленький CSS файл normalize.css , для обеспечения лучшей согласованности браузеров в стандартном оформлении элементов:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Теперь разберем все по порядку, по возможности без лишней воды, доступно и понятно, на родном, многострадальном нашем языке.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" > Все < li>< span class = "filter" data- filter= "app" > Приложения < li>< span class = "filter" data- filter= "card" > Визитки < li>< span class = "filter" data- filter= "icon" > Иконки < li>< span class = "filter" data- filter= "logo" > Логотип < li>< span class = "filter" data- filter= "web" > Веб- Дизайн

• Все
• Приложения
• Визитки
• Иконки
• Логотип
• Веб-Дизайн

На панели навигации, размещаем весь список работ, разбитый на категории. Нам необходимо каждую категорию портфолио через атрибут data-cat связать с тем или иным пунктом панели навигации в соответствии со значением в атрибуте data-filter . Путем сопоставления значений data-filter с data-cat , и будет выполняться фильтрация элементов портфолио по категориям.
Кроме этого, добавим к миниатюре, спрятанную до поры до времени, небольшую панель с названием работы и заголовком категории, всплывающую только при наведении на картинку. А чтобы легче сформировать внешний вид всей этой конструкции в CSS, пропишем соответствующие классы элементам:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" > Хостинг Beget. Ru < span class = "text-category" > Логотип < div class = "label-bg" > .........

Хостинг Beget.Ru Логотип .........

Обратите внимание, что вы можете добавить ссылки к картинке или непосредственно в подпись, для того чтобы пользователь смог в полном объеме лицезреть все ваши труды.

CSS

Теперь, тихим сапом, переходим к самому интересному, к формированию в CSS общих стилей пользовательского интерфейса нашей странички портфолио и адаптивной её версии. В статье укажу лишь базовые (по умолчанию) значения, то есть без каких-либо фоновых картинок и подключенных шрифтов, все это, кому оно надо, можно увидеть в демо, или найти в архиве с исходниками.

.container { position : relative ; width : 960px ; margin : 0 auto ; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition : all 1s ease; } #filters { margin : 1% ; padding : 0 ; list-style : none ; } #filters li { float : left ; } #filters li span { display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* добавляем немного тени для текста */ text-shadow : 1px 1px #FFFFFF ; cursor : pointer ; } /* изменяем фон категории при наведении */ #filters li span: hover { background : #34B7CD ; text-shadow : 0 0 2px #004B7D ; color : #fff ; } /* фон активного пункта категории */ #filters li span.active { background : rgb (62 , 151 , 221 ) ; text-shadow : 0 0 2px #004B7D ; color : #fff ; } #portfoliolist .portfolio { -webkit-box-sizing: border-box ; -moz-box-sizing: border-box ; -o-box-sizing: border-box ; width : 23% ; margin : 1% ; display : none ; float : left ; overflow : hidden ; } .portfolio-wrapper { overflow : hidden ; position : relative !important; background : #666 ; cursor : pointer ; } .portfolio img { max-width : 100% ; position : relative ; } /* по умолчанию подписи скрыты */ .portfolio .label { position : absolute ; width : 100% ; height : 40px ; bottom : -40px ; } .portfolio .label-bg { background : rgb (62 , 151 , 221 ) ; width : 100% ; height : 100% ; position : absolute ; top : 0 ; left : 0 ; } .portfolio .label-text { color : #fff ; position : relative ; z-index : 500 ; padding : 5px 8px ; } .portfolio .text-category { display : block ; font-size : 9px ; }

Container { position: relative; width: 960px; margin: 0 auto; /* Вы сможете видеть цепь переходов при изменении размеров окна браузера */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #filters { margin:1%; padding:0; list-style:none; } #filters li { float:left; } #filters li span { display: block; padding:5px 20px; text-decoration:none; color:#666; /* добавляем немного тени для текста */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; } /* изменяем фон категории при наведении */ #filters li span:hover { background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; } /* фон активного пункта категории */ #filters li span.active { background: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; } .portfolio-wrapper { overflow:hidden; position: relative !important; background: #666; cursor:pointer; } .portfolio img { max-width:100%; position: relative; } /* по умолчанию подписи скрыты */ .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: rgb(62, 151, 221); width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; }

Во второй части, прямо в этой же таблице стилей, с помощью нескольких медиа запросов создадим альтернативные секции CSS. Чтобы макет нашей страницы корректно отображался на экранах различных мобильных устройств, добавим и альтернативные правила CSS для разных экранов в эти секции. Тем самым мы запросто переопределяем любые правила, установленные ранее в нашей CSS таблице для обычных браузеров и добьемся той самой, вожделенной адаптивности.

/* Планшет */ @media only screen and (min-width : 768px ) and (max-width : 959px ) { .container { width : 768px ; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width : 767px ) { .container { width : 95% ; } #portfoliolist .portfolio { width : 48% ; margin : 1% ; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width : 480px ) and (max-width : 767px ) { .container { width : 70% ; } }

/* Планшет */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } } /* Мобильный - Примечание: Дизайн для ширины 320px*/ @media only screen and (max-width: 767px) { .container { width: 95%; } #portfoliolist .portfolio { width:48%; margin:1%; } } /* Мобильный - Примечание: Дизайн для ширины 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 70%; } }

Вот и все. Наша замечательная страничка под емким названием «Портфолио» готова, остается лишь наполнить её своими не менее замечательными и выдающимися работами, и выставить на обозрение всему миру. Можно еще по тихому, скромно так, гордиться собой. Главное не переусердствовать в этом деле.
Смотрите еще раз пример и при необходимости забирайте исходники, на досуге, в тихой домашней обстановке, сможете довести до совершенства эту работу.

При создании урока использовался материал: . Оригинальная, девственно чистая, только что из под пера автора, страница портфолио, находится там же.

Удачи всем и с пользой для тела, провести остатки короткого лета!

by Dmitry Semenov
is a jQuery image gallery and content slider plugin. It’s completely responsive, touch-friendly and has modular architecture that allows you include only features that you need to optimize file size and performance.

by Andy – The Coffeescripter
A highly customizable gallery/showcase plugin for jQuery.

by Trent
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

Tonic Gallery – jQuery XML Portfolio Gallery | $6

by Aino
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

by CatchMyFame
The other day I went looking for a simple way using jQuery to fade between a set of images on a page. So, being a coder, I set out to create my own plugin.

by Thomas Kahn
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.

by Victor Zambrano – frwrd.net
Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

by Caspar David Friedrich
EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures.

by Arnault Pachot
A multi-format carousel for jQuery, Non obstrusive and accessible portfolio supporting multiple media: photos, video (flv), audio (mp3). This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

The Wall – Media Gallery – jQuery powered | $5

by Stefan Petre
Another image gallery plugin with space effect, very light and simple plugin.

by Moreno Di Domenico
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.

by Fabrizio Calderan
Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.

by Cody
The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only.

VION – jQuery Image Gallery Plugin | $7

by Malihu
A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

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

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.

2. Cube Portfolio

3. Media Boxes Portfolio

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.

4. Colio

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.

5. ZoomFolio

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.

6. Metro

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.

7. Portfolio Grids

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.

8. Bootfolio

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.

9. Tonic Gallery

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.

10. Mini

11. Alfred

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.

12. jQuery Portfolio Gallery Tree

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.

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

ИСХОДНИКИ

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

Шаг 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