Автор

Галерея изображений на jQuery

Галерея изображений на jQuery


 

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

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

 

ДЕМО
ИСХОДНИКИ

 

HTML разметка

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

 

<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. В котором каждый элемент это картинка.

 

<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 стили для миниатюр ну и списка категорий.

 

.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)[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, которая и производит фильтрацию картинок. Это все что касается фильтрации.

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

 

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), а также запрещаем показ названия картинки и увеличение картинки при наведении мыши.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Галерея изображений на jQuery

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


Галерея изображений на jQuery

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


Галерея изображений на jQuery

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


Галерея изображений на jQuery

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


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close