Галерея jquery на весь экран. Fotorama - адаптивная jQuery галерея, установка и настройка. jQuery CSS3 плагин «Wave Display Effect»

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

Для создания этой галереи будут использованы две бесплатные библиотеки JQuery: Quicksand и PrettyPhoto . Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания.

ИСХОДНИКИ

HTML разметка

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

• Категории:


• Все


• Категория 1


• Категория 2


• Категория 3


• Категория 4

Название картинки

Как говорилось выше, элементы списка это изображения в галерее. Каждый элемент списка включает составные. Это непосредственно само изображение, точнее его миниатюра, а также описание. Миниатюра представляет собой ссылку на основное изображение. Атрибут rel необходим для вызова javascript и открытия основного изображения.

Не забывайте также о 2 важных вещах, у элемента списка li атрибут data-id должен быть уникальным. Атрибут data-type содержит класс категории, список которых я описывал выше. О разметке вроде бы все.

Стили CSS

Особо заострять внимание на стилях не буду, так как используем мы уже готовую библиотеку PrettyPhoto , которая отвечает за увеличение изображения, и css кода достаточно много. Однако стоит заметить предусмотрено 5 вариантов оформления увеличенного изображения, хотя в идеале всего 3 , так как в двух вариантах лишь убирается закругление.

Поэтому, покажу лишь CSS стили для миниатюр ну и списка категорий.

Portfolio-categ { margin-bottom:30px; }
.portfolio-categ li {
display:inline;
margin-right:10px;
}
.image-block {
display:block;
position: relative;
}
.image-block img {
border: 1px solid #d5d5d5;
border-radius: 4px 4px 4px 4px;
background:#FFFFFF;
padding:10px;
}
.image-block img:hover {
border: 1px solid #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li {
float: left;
margin: 0 12px 20px 0;
overflow: hidden;
width: 245px;
padding:5px;
}
.home-portfolio-text { margin-top:10px; }
li.active a { text-decoration:underline; }

В принципе, со стилями должно быть все понятно. Чтобы категории выстроились в ряд свойству display придается значение inline . Для того чтобы придать эффект обводки изображения, задается фоновый цвет (белый) и отступ в 10 пикселей. Размеры элементов списка задаются в .portfolio-area li .

jQuery

Ну и напоследок самое важное, то ради чего весь урок. Это jQuery код. Начнем с фильтрации картинок, по категориям.

// Выбираем все дочерние элементы portfolio-area и записываем в переменную
var $data = $(".portfolio-area").clone();

$(".portfolio-categ li").click(function(e) {
$(".filter li").removeClass("active");

Var filterClass=$(this).attr("class").split(" ").slice(-1);

If (filterClass == "all") {
var $filteredData = $data.find(".portfolio-item2");
} else {
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, {
duration: 600,
adjustHeight: "auto"
}, function () {

LightboxPhoto();
});
$(this).addClass("active");
return false;
});

C помощью метода clone() и селектора, выбираем все дочерние элементы у .portfolio-area и записываем их в переменную $data . Далее отслеживаем клик по одной из категорий, элемент li у списка с классом .portfolio-categ . Делаем все категории не активными, посредством удаления removeClass(«active»), если этого не делать то со временем все категории будут активными и фильтрация остановиться.

Так как мы кликаем по элементу списка, то в селекторе this содержится элемент списка то есть li , у него мы берем значение атрибута class и с помощью метода split разбиваем название класса на несколько частей, границей является пробел (т.е. если класс был «all active» то после разбиения мы получаем массив из «all» и «active»). А уже далее методом slice выбираем первый элемент массива (в нашем случае «all»), и записываем получившийся результат в переменную filterClass . Если пробела не было то название класса не измениться.

Далее проверяем если в переменной filterClass строка all , то методом .find выбираем все элементы с классом portfolio-item2 из массива $data , который мы рассматривали выше. Выбранные элементы (а это все элементы списка, то есть все картинки) помещаем в переменную filteredData .

В противном случае, если filterClass не равна all , то в переменную filterData поместим не все элементы списка, а лишь те у которых атрибут data-type совпадает с классом категории. Короче говоря элементы только одной категории.

И в конечном итоге полученную переменную передаем в библиотеку jquery quicksand , которая и производит фильтрацию картинок. Это все что касается фильтрации.

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

JQuery("a").prettyPhoto({
animationSpeed: "fast",
slideshow: 5000,
theme: "facebook",
show_title: false,
overlay_gallery: false
});

Отслеживается клик по ссылке, у которой атрибут rel начинается с prettyPhoto . После чего в дело вступает библиотека prettyPhoto , и изображение чудесным образом увеличивается. Кстати, мы также передаем несколько параметров. Такие как скорость анимации — быстрая, задержка у слайд шоу — 5 секунд, тема оформления Facebook (всего 5 тем они находятся в папке images/prettyPhoto), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши.

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

Макет странички, исполняемый 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%; } }

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

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

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

Всем привет! В этой статье мы рассмотрим, как сделать красивую и удобно сортируемую галерею на JQuery .

Красивая, удобно сортируемая галерея – это прекрасная вещь для вашего сайта, которая будет радовать вас и ваших посетителей. Сегодня мы рассмотрим очень простой в установке и настройке плагин для библиотеки JQuery – Filterizr .

Несмотря на простоту использования, плагин достаточно легкий и эффектный. Давайте рассмотрим его подробнее.

Демонстрация

Чтобы посмотреть, как работает плагин, зайдите на официальный сайт , и вот он уже перед вами!

Вы можете выбрать сортировку по городам, природе, промышленности, рассвету, закату или показать все фотографии(значение по умолчанию). Присутствует кнопка Shuffle , которая позволит вам перемешать изображения. Кнопки ASC и DESC сортируют картинки по возрастанию и убыванию соответственно. Если вы хотите найти какое-то изображение по позиции или описанию, выберите нужный пункт в выпадающем списке и введите запрос в поле поиска. При наведении на изображение мышки картинка превращается из черно-белой в цветную.

Установка

Чтобы скачать библиотеку, нажмите кнопку Download или используйте NPM :

Npm install filterizr

Плагин уже настроен из коробки, но, если вы хотите переписать значения по умолчанию, вы можете либо:

1) Передать объект с параметрами в конструктор JQuery

Var filterizd = $(".filtr-container").filterizr({
// параметры
})

2) Переписать параметры, используя setOptions() метод в объекте Filterizr .

Filterizd.filterizr("setOptions", {
// параметры
})

Параметры

Параметры по умолчанию:

Options = {
animationDuration: 0.5,
callbacks: {
onFilteringStart: function() { },
onFilteringEnd: function() { }
},
delay: 0,
delayMode: "progressive",
easing: "ease-out",
filter: "all",
filterOutCss: {
opacity: 0,
transform: "scale(0.5)"
},
filterInCss: {
opacity: 0,
transform: "scale(1)"
},
layout: "sameSize",
selector: ".filtr-container",
setupControls: true
}

Более подробные инструкции и описание каждого параметра вы можете найти на

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

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

Долго выбирал тему для сегодняшнего топика. В итоге заметил, что мы еще не делали подборок с галереями изображений . По моему отличная тема, так как галереи присутствуют у множества сайтов. Откровенно говоря, все они не очень привлекательны. Учитывая нынешние тенденции развития jquery, html5 и т. д. я подумал, ведь должны быть уже намного привлекательней решения чем те, которые встречались мне раньше. Итак. Потратив день, удалось найти огромнейшее количество скриптов. Из всей этой горы я решил отобрать только , ведь я люблю , как вы уже заметили по предыдущим постам.
Галерея изображений применима не только в случае с фотоальбомами . Скрипт можно использовать, думаю, что это даже правильней будет, в качестве портфолио для фотографов, дизайнеров и т. д. Jquery эффекты помогут привлечь внимание посетителей и просто придадут изящности вашему сайту.
Итак. К вашему вниманию коллекция jquery плагинов галерей изображений для сайта .
Не забываем комментировать и помните, чтоб не потерять эту подборку, вы можете добавить ее в избранное, нажав на звездочку внизу статьи.

PHOTOBOXБесплатная, легкая, адаптивная галерея изображений , в которой все эффекты, переходы сделаны средствами css3. Идеальна для создания сайта-потрфолио фотографа.

S GalleryПривлекательный Jquery плагин галереи изображений . Анимация работает с помощью css3.

DIAMONDS.JSОригинальный плагин для создания галереи изображений . Миниатюры имеют форму ромба , что в данный момент очень популярно. Такая форма сделана с помощью css3. Единственный минус этой галереи - это отсутствие лайтбокса, в котором бы открывалось фото в полный размер. То есть потребуется раками прикрутить плагин лайтбокса. Данный скрипт формирует адаптивную сетку изображений в форме ромба.

SuperboxСовременная галерея изображений с использованием Jquery, css3 и html5 . Мы все привыкли, что при клике на превью полное изображение открывается в лайтбоксе (всплывающем окне). Разработчики данного плагина решили, что лайтбокс уже отжил свое. Изображения в этой галереи открываются ниже превью. Посмотрите демо и убедитесь, что такое решение выглядит на много современней.
| Smooth Diagonal Fade GalleryСовременная галерея изображений в которой превью распределяются по всему пространству экрана . Скрипт умеет сканировать папку с фото на сервере, то есть не нужно вставлять каждое изображение по отдельности. Достаточно загрузить картинки в папку на сервере и в настройках указать путь к директории. Далее скрипт все сделает сам.

Gamma GalleryСтильная, легкая, адаптивная галерея изображений с сеткой в стиле Pinterest , которая сейчас стала очень популярна. Скрипт отлично работает как на стационарных компьютерах, так и на мобильных устройствах с любым разрешением экрана. Отличное решение для создания портфолио веб-дизайнера.

THUMBNAIL GRID WITH EXPANDING PREVIEWПлагин представляет собой адаптивную сетку изображений . При клике ниже выводится фото побольше и описание. Хорошо подойдет для создание портфолио.

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

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

Mosaic FlowПростая, адаптивная галерея изображений с сеткой в стиле Pinterest .

GalereyaЕще одна стильная галерея с сеткой в стиле Pinterest с фильтром по категориям. Работает в браузерах: Chrome, Safari, Firefox, Opera, IE7+, Android browser, Chrome mobile, Firefox mobile.

least.jsОтличная бесплатная галерея изображений с использованием JQUERY, 5 и CSS3. Она имеет очень привлекательный внешний вид и, несомненно, привлечет внимание ваших посетителей.

flipLightBoxПростенькая галерея изображений. При клике на превью, в лайтбоксе открывается полное изображение.

blueimp GalleryГибкая галерея. Способна выводить в модальном окне не только изображения, но и видео . Отлично работает на сенсорных устройствах. Легко кастомизируется и есть возможность расширения функционала с помощью дополнительных плагинов (См. следующий плагин).