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

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

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

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

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 — поделитесь с друзьями 🙂

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!