Для створення цієї галереї будуть використані дві безкоштовні бібліотеки JQuery. Quicksand і PrettyPhoto. Вони значно спрощують створення галереї. Як завжди результат роботи Ви можете побачити на демонстраційній сторінці, а також завантажити архів з працюючою галерей і всі вихідні файли. Єдиним мінусом, якщо можна так сказати, є створення в ручну мініатюр для великих зображень. А в усьому іншому ця галерея варта уваги. Так само як і ця!
HTML розмітка
Особливо загострювати увагу на стилях не буду, так як використовуємо ми вже готову бібліотеку PrettyPhoto. яка відповідає за збільшення зображення, і css коду досить багато. Однак варто зауважити передбачено 5 варіантів оформлення збільшеного зображення, хоча в ідеалі всього 3. так як в двох варіантах лише забирається закруглення.
portfolio-categ # 123; margin-bottom. 30px; # 125;
.portfolio-categ li # 123;
display. inline;
margin-right. 10px;
# 125;
.image-block # 123;
display. block;
position. relative;
# 125;
.image-block img # 123;
border. 1px solid # d5d5d5;
border-radius. 4px 4px 4px 4px;
background. #FFFFFF;
padding. 10px;
# 125;
.image-block img. hover # 123;
border. 1px solid # A9CF54;
box-shadow. 0 0 5px # A9CF54;
# 125;
.portfolio-area li # 123;
float. left;
margin. 0 12px 20px 0;
overflow. hidden;
width. 245px;
padding. 5px;
# 125;
.home-portfolio-text # 123; margin-top. 10px; # 125;
li .active a # 123; text-decoration. underline; # 125;
// Вибираємо все дочірні елементи portfolio-area і записуємо в змінну
var $ data = $ # 40; ".portfolio-area" # 41 ;. clone # 40; # 41; ;
$ # 40; '.portfolio-categ li' # 41 ;. click # 40; function # 40; e # 41; # 123;
$ # 40; ".filter li" # 41 ;. removeClass # 40; "Active" # 41; ;
var filterClass = $ # 40; this # 41 ;. attr # 40; 'Class' # 41 ;. split # 40; '' # 41 ;. slice # 40; - 1 # 41; # 91; 0 # 93; ;
if # 40; filterClass == 'all' # 41; # 123;
var $ filteredData = $ data. find # 40; '.portfolio-item2' # 41; ;
# 125; else # 123;
var $ filteredData = $ data. find # 40; '.portfolio-item2 [data-type =' + filterClass + ']' # 41; ;
# 125;
$ # 40; ".portfolio-area" # 41 ;. quicksand # 40; $ FilteredData. # 123;
duration. 600.
adjustHeight. 'Auto'
# 125 ;. function # 40; # 41; # 123;
lightboxPhoto # 40; # 41; ;
# 125; # 41; ;
$ # 40; this # 41 ;. addClass # 40; "Active" # 41; ;
return false;
# 125; # 41; ;
Так як ми натискаємо по елементу списку, то в селекторі this міститься елемент списку тобто li. у нього ми беремо значення атрибута class і за допомогою методу split розбиваємо назву класу на кілька частин, межею є пробіл (тобто якщо клас був «all active» то після розбиття ми отримуємо масив з «all» і «active»). А вже далі методом slice вибираємо перший елемент масиву (в нашому випадку «all»), і записуємо отриманий результат в змінну filterClass. Якщо пробілу не було то назва класу не змінитися.
Далі перевіряємо якщо у змінній filterClass рядок all. то методом .find вибираємо всі елементи з класом portfolio-item2 з масиву $ data. який ми розглядали вище. Вибрані елементи (а це все елементи списку, тобто всі картинки) поміщаємо в змінну filteredData.
І в кінцевому підсумку отриману змінну передаємо в бібліотеку jquery quicksand. яка і виробляє фільтрацію картинок. Це все що стосується фільтрації.
Тепер, що стосується збільшення зображення в спливаючому вікні. Тут все набагато простіше.
jQuery # 40; "A [rel ^ = 'prettyPhoto']" # 41 ;. prettyPhoto # 40; # 123;
animationSpeed. 'Fast'.
slideshow. 5000.
theme. 'Facebook'.
show_title. false.
overlay_gallery. false
# 125; # 41; ;
Відстежується клік по посиланню, у якій атрибут rel починається з prettyPhoto. Після чого в справу вступає бібліотека prettyPhoto. і зображення чудесним чином збільшується. До речі, ми також передаємо кілька параметрів. Такі як швидкість анімації - швидка, затримка у слайд шоу - 5 секунд, тема оформлення Facebook (всього 5 тим вони знаходяться в папці images / prettyPhoto), а також забороняємо показ назви картинки і збільшення картинки при наведенні миші. Повну документацію по prettyPhoto можна знайти тут