Jquery плагин для портфолио. Плагин для создания портфолио. Объемные CSS кнопки

Используется jQuery плагин jmFullWall для получения действительно впечатляющих портфолио из фотографий.

Требования

• jQuery 1.4+
• jquery.imgpreload.js (thanks to Dimas Begunoff)
• jquery.imagepanner.js (thanks to Dynamic Drive)
• jmFullWall.js

Совместимость

• Mozilla Firefox
• Google Chrome
• Safari
• Opera

Для Демо 4

res/img/slide/1.jpg res/img/slide/1.jpg Audi Locus Audi Locus res/img/slide/2.jpg res/img/slide/2.jpg Porsche Supercar Porsche Supercar res/img/slide/3.jpg res/img/slide/3.jpg Ford GT Ford GT res/img/slide/4.jpg res/img/slide/4.jpg Lamborghini Murcielago Lamborghini Murcielago res/img/slide/5.jpg res/img/slide/5.jpg Nissan R390 GT1 Nissan R390 GT1 res/img/slide/6.jpg res/img/slide/6.jpg Porsche 911 GT3 RS Porsche 911 GT3 RS

Подключаем файл стилей:

Подключаем скрипты:

$(function(){ $("#wall").jmFullWall({ itemsForRow: 5, itemTransition: "slideDown", itemTransitionSpeed: 150, detailTransitionIn: "slideDown", detailTransitionOut: "slideUp" }); });

• itemTransition :fadeIn , Эффект появления миниатюр. Может быть установлен на "fadeIn", "show" или "slideDown".
• itemTransitionSpeed :200 , Скорость появления миниатюр. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• itemsForRow :5 , Сколько элементов в строке.
• itemsBtnNext :jmFullWall-next , Название класса для кнопки "Вперед".
• itemsBtnPrev :jmFullWall-prev , Название класса для кнопки "Назад".
• itemsBtnClose :jmFullWall-close , Название класса для кнопки "Закрыть".
• detailTransitionIn :fadeIn , Эффект при открытии изображения. Может быть "fadeIn", "show" или "slideDown".
• detailTransitionInSpeed :500 , Скорость открытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• detailTransitionOut :fadeOut , Эффект при закрытии изображения. Может быть "fadeOut", "hide" или "slideUp".
• detailTransitionOutSpeed :500 , Скорость закрытия изображения. Может быть "slow", "normal", "fast" или в миллисекундах (например, 1000).
• showTooltip :true , Включить подсказки, когда изображение полностью загрузится.
• imgPanning :true , Включить панорамирование изображения, если режим полноэкранный.Enable the panning of the image when is in fullscreen mode.
• imgPanningCenter :true , Центрировать изображение, если режим полноэкранный.
• imgPanningZoom :true , Включить опцию увеличения, если режим полноэкранный.

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

ИСХОДНИКИ

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

Нам необходимо создать список в виде неупорядоченного списка, и заключим это все в единый элемент 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