Здравствуйте, уважаемые читатели XoZbloga! В этом уроке я покажу Вам, как создать минималистичную, но в тоже время удобную и функциональную фото галерею на jQuery, или галерею изображений, кому как удобно. В галерее есть возможность создавать категории, с последующей фильтрацией. Так же есть возможность запуска слайд-шоу. Галерея работает во всех браузерах, так что проблем с адаптацией не будет.
Для создания этой галереи будут использованы две бесплатные библиотеки JQuery: Quicksand и PrettyPhoto. Они значительно упрощают создание галереи. Как всегда результат работы Вы можете увидеть на демонстрационной странице, а также скачать архив с работающей галерей и все исходные файлы. Единственным минусом, если можно так сказать, является создание в ручную миниатюр для больших изображений. А во всем остальном эта галерея достойна внимания. Так же как и эта!
HTML разметка
Сначала разберем панельку со списком категорий, это маркированный список ul. Причем у каждого элемента списка должно быть уникальное имя класса.
1 2 3 4 5 6 7 8 | <ul class="portfolio-categ filter"> <li>Категории:</li> <li class="all active"><a href="#">Все</a></li> <li class="cat-item-1"><a href="#" title="Category 1">Категория 1</a></li> <li class="cat-item-2"><a href="#" title="Category 2">Категория 2</a></li> <li class="cat-item-3"><a href="#" title="Category 3">Категория 3</a></li> <li class="cat-item-4"><a href="#" title="Category 4">Категория 4</a></li> </ul> |
Как и панель со списком категория сама галерея также является маркированным списком ul с классом portfolio-area. В котором каждый элемент это картинка.
1 2 3 4 5 6 7 8 9 10 11 | <li class="portfolio-item2" data-id="id-5" data-type="cat-item-2"> <div> <span class="image-block"> <a class="image-zoom" href="images/big/pic6.jpg" rel="prettyPhoto[galery]" title="Lorax"><img width="225" height="140" src="images/thumbs/p6.jpg" alt="Lorax" title="Lorax" /></a> </span> <div class="home-portfolio-text"> <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Lorax">Название картинки</a></h2> <p class="post-subtitle-portfolio">опубликовано: 2012</p> </div> </div> </li> |
Как говорилось выше, элементы списка это изображения в галерее. Каждый элемент списка включает составные. Это непосредственно само изображение, точнее его миниатюра, а также описание. Миниатюра представляет собой ссылку на основное изображение. Атрибут rel необходим для вызова javascript и открытия основного изображения.
Не забывайте также о 2 важных вещах, у элемента списка li атрибут data-id должен быть уникальным. Атрибут data-type содержит класс категории, список которых я описывал выше. О разметке вроде бы все.
Стили CSS
Особо заострять внимание на стилях не буду, так как используем мы уже готовую библиотеку PrettyPhoto, которая отвечает за увеличение изображения, и css кода достаточно много. Однако стоит заметить предусмотрено 5 вариантов оформления увеличенного изображения, хотя в идеале всего 3 , так как в двух вариантах лишь убирается закругление.
Поэтому, покажу лишь CSS стили для миниатюр ну и списка категорий.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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 код. Начнем с фильтрации картинок, по категориям.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Выбираем все дочерние элементы 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)[0]; if (filterClass == 'all') { var $filteredData = $data.find('.portfolio-item2'); } else { var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']'); } $(".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, которая и производит фильтрацию картинок. Это все что касается фильтрации.
Теперь, что касается увеличения изображения в всплывающем окне. Здесь все гораздо проще.
1 2 3 4 5 6 7 | jQuery("a[rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'fast', slideshow: 5000, theme: 'facebook', show_title: false, overlay_gallery: false }); |
Отслеживается клик по ссылке, у которой атрибут rel начинается с prettyPhoto. После чего в дело вступает библиотека prettyPhoto, и изображение чудесным образом увеличивается. Кстати, мы также передаем несколько параметров. Такие как скорость анимации — быстрая, задержка у слайд шоу — 5 секунд, тема оформления Facebook (всего 5 тем они находятся в папке images/prettyPhoto), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши. Полную документацию по prettyPhoto можно найти
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или Facebook. Если урок Вам понравился и пригодился сделайте tweet или like — поделитесь с друзьями 🙂
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.flashuser.net/tutorials/jquery-photo-gallery.html