Главная » Уроки » Пример адаптивной верстки Портфолио с фильтрацией работ на jQuery

Пример адаптивной верстки Портфолио с фильтрацией работ на jQuery

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

Пример адаптивной верстки страницы Портфолио

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 
Сразу после jQuery подключаете файлы со скриптами (находятся в архиве с исходниками), необходимые для работы фильтрации с переходами и реализации всплывающих подписей к картинкам:
 

<script type="text/javascript" src="js/jquery.easing.min.js"></script>	
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>

 
Запустите плагин 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();	
	});	
</script>

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

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

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

Разметку панели навигации по категориям, выполним в виде неупорядоченного списка UL с фильтром данных data-filter:
 

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

 
На панели навигации, размещаем весь список работ, разбитый на категории. Нам необходимо каждую категорию портфолио через атрибут 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</a>
					<span class="text-category">Логотип</span>
				</div>
				<div class="label-bg"></div>
			</div>
		</div>
	</div>			
	.........
</div>

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

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;
}

 
Во второй части, прямо в этой же таблице стилей, с помощью нескольких медиа запросов создадим альтернативные секции 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%;
	}
}

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

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

driver

Буду благодарен, если поделитесь ссылкой на эту статью в своих соц. сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

13 комментариев
  1. Василий says:

    У меня такая задача: сделать меню ресторана. по нажатию на категории — будут отображаться блюда этой категории.

    А как при нажатии на кнопку «Все» Отобразить не все блюда из меню, а только категории блюд. и уже по нажатии на категорию — видеть блюда из этой категории (аналогично клику по ссылке с категорией)

    Ответить
    • driver says:

      Василий.

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

      <span class="filter" data-filter="категория"><img src="img/картинка категории блюд.jpg" alt="" /></span>

      Так же можете и в подпись(в html тег) к картинке прописать атрибуты для связки с js и с той или иной категорией блюд.

      <span class="text-category filter" data-filter="категория">Логотип</span>

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

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

      Вот набросал пример: Тынц>>>

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

      Надеюсь не очень запутал, у меня иногда у самого глаза в кучу от всего этого ))).

      Удачи!

      Ответить
    • Роман says:

      Сделай каждую кнопку,на которую нужно нажать,ссылками,который будут направлять в нужном направлении.

      Ответить
  2. Юрий says:

    Не получается совместить данную фильтрацию и fancybox.

    Фильтрация работает, а картинки открываются в следующем окно.

    Кто с кем не дружит?

    Ответить
  3. Юрий says:

    Вот такого типа

    a class="gallery" rel="group" href="images/gallery/3.jpeg"><img src="images/gallery/3.jpeg" width="90" height="90" alt=""

    Ответить
    • driver says:

      У вас не срабатывает сам fancybox и картинки соответственно открываются в новой вкладке или окне. Проверьте правильно ли подключены плагины jquery.easing и jquery.fancybox, и таблица стилей jquery.fancybox.css если вы их используете. Ну и конечно в разделе head вызов fancybox, ели ничего не путаю по умолчанию это:

      <script type="text/javascript">
      $(document).ready(function() {
          $("a.gallery").fancybox();
      });
      </script>

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

      Так же обратите внимание на библиотеку jQuery, в примере портфолио я использую подключение с google, версия 1.9.1, если вы с fancybox подключили свою версию jquery, может возникнуть конфликт, оставьте одну из них, с которой всё будет работать.

      Ответить
      • Юрий says:

        Благодарю.

        Буду пробовать.

        Ответить
      • Юрий says:

        Driver, Вы правы.

        Есть конфликт библиотек jquery или же порядка их подключения.

        Разбираюсь

        Ответить
  4. Альберт says:

    У меня вопрос по подчеркиваниям ссылок.

    <li><span class="filter" data-filter="app">Приложения</span></li>

    Мне нужно, чтобы этот пункт меню был подчеркнут пунктирной линией. Т.е. обычной линией подчеркнуть не составляет труда, пунктирную можно добавить с помощью border-bottom или вставкой фона с пунктиром. Но такими способами пунктир ложится но все поле, включая зону padding, а не только под словом. Как сделать так, чтобы пунктир был только под словом?

    Для чего нужен пунктир? Обычное подчеркивание подразумевает, что действие будет с перезагрузкой страницы, а пунктирная ссылка — что действие будет произведено без перезагрузок, что мы и имеем при работе со скриптом.

    Задача не из простых, НО очень актуальная!

    Ответить
    • driver says:

      Если не используете фоновую заливку background для пунктов фильтрации, самое простое применить margin вместо padding, и тогда можете использовать border-bottom: 1px dotted #color; в этом случае подчеркнутым будет только внутренняя область, т.е. слово. То же самое и для hover и active, убрать background и прописать пунктир нужного вам цвета. Примерно так: тынц

      Ответить
  5. Николай says:

    Здравствуйте, подскажите почему у меня все ссылки «отключились»? Цеплял ссылку на все дивы и все равно она не активна... в коде есть, но как буд то на заднем плане. Как каждому блоку назначить свою ссылку? Рабочий пример

    Ответить
    • driver says:

      Здравствуйте.

      У вас картинка обнесена ссылкой на страницу с продуктом, но всплывающее описание выполнено на весь блок с картинкой, соответственно подпись перекрывает и картинку и ссылку.

      Сделайте заголовок и описание ссылкой, получится следующее:

      <div class="label" style="bottom: -180px;"> <div class="label-text"> <a href="http://pdm.page-master.com.ua/product/тележка-3/" class="text-title">Тележка 3</a> <a href="http://pdm.page-master.com.ua/product/тележка-3/" class="text-category">описание</a> </div> <div class="label-bg"></div> </div>

      Соответственно все лишние ссылки уберите.

      Объёмные заголовок и описание будут выходить за рамки блока, чтобы этого не происходило в селектор .portfolio .label-text добавьте свойство white-space: normal;. Для ссылок при наведении можете убрать подчёркивание .portfolio a:hover{text-decoration: none;}

      Всё это применимо именно к вашему случаю, в принципе, если всё сделаете правильно, должно сработать так как нуна)))

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru