две свободни JQuery библиотеката ще бъдат използвани за създаване на тази галерия. Quicksand и PrettyPhoto. Те значително опростяване на създаването на галерията. Както винаги, в резултат на работата може да се види на страницата демо и да изтеглите файла с действащи галерии и всички изходни файлове. Единственият недостатък, ако мога така да се изразя, е създаването на наръчник на миниатюри за по-големи изображения. И в останалата част на тази галерия е достоен за внимание. Точно така!
HTML маркиране
Особен акцент върху стиловете няма, защото ние използваме готов библиотека PrettyPhoto. който е отговорен за увеличаване на достатъчно кода на изображението и CSS. Въпреки това, той е да се отбележи, са с 5 заведения за проектиране по-голямо изображение, въпреки че в идеалния случай всички 3 защото двете версии премахнати само закръгляване.
портфолио-CATEG # 123; марж дъно. 30px; # 125;
.портфолио-CATEG Ли # 123;
дисплея. инлайн;
марж-надясно. 10px;
# 125;
.изображение на блока # 123;
дисплея. блок;
позиция. относителна;
# 125;
.образ-блок IMG # 123;
граница. 1px твърдо вещество # d5d5d5;
граничен радиус. 4px 4px 4px 4px;
фон. #FFFFFF;
уплътнение. 10px;
# 125;
.образ-блок IMG. мътя # 123;
граница. 1px твърдо вещество # A9CF54;
кутия-сянка. 0 0 5px # A9CF54;
# 125;
.портфолио-област Ли # 123;
плава. ляв;
марж. 0 0 12px 20px;
преливник. скрито;
ширина. 245px;
уплътнение. 5px;
# 125;
.домашно портфейл текст # 123; марж-отгоре. 10px; # 125;
Li .active на # 123; текст-украса. подчертае; # 125;
// Избор на всички деца на портфолио-зоната и пишат на променлива
Var $ = $ данни # 40; ".portfolio-зона" # 41. клонинг # 40; # 41; ;
$ # 40; ".portfolio-CATEG Li ' # 41. кликване # 40; функция # 40; д # 41; # 123;
$ # 40; ".filter Li" # 41. removeClass # 40; "Актив" # 41; ;
Var filterClass = $ # 40; това # 41. ATTR # 40; "Клас" # 41. разцепване # 40; '' # 41. парче # 40; - 1 # 41; # 91; 0 # 93; ;
ако # 40; filterClass == "всички" # 41; # 123;
Var $ filteredData = $ данни. намирам # 40; ".portfolio-т.2" # 41; ;
# 125; още # 123;
Var $ filteredData = $ данни. намирам # 40; ".portfolio-ITEM2 [данни тип = '+ filterClass +'] # 41; ;
# 125;
$ # 40; ".portfolio-зона" # 41. плаващ пясък # 40; $ FilteredData. # 123;
продължителност. 600.
adjustHeight. "Auto"
# 125. функция # 40; # 41; # 123;
lightboxPhoto # 40; # 41; ;
# 125; # 41; ;
$ # 40; това # 41. addClass # 40; "Актив" # 41; ;
върнете невярна;
# 125; # 41; ;
Така че ние кликнете върху елемент в списъка, след това селектор съдържа списък елемент, който е Ли. го вземем стойността на атрибута клас и използването на метода на разделяне разделят името на класа на няколко части, границата е пространство (тоест, ако класът е «всички активни» след разлагане получаваме масив от «всички» и «активна»). Друг метод е вече режа изберете първия елемент на масива (в този случай «всички») и напишете резултата, получен в променливата filterClass. Ако пространството не е името на класа не се променя.
След това проверете дали променливата низ filterClass всички. метода .find изберете всички елементи с клас портфолио-ITEM2 от данните на масива $. който по-горе. Избраните елементи (които всички елементи от списъка, тоест всички изображения) се поставят в една променлива filteredData.
И в крайна сметка води променлива се предава на плаващите пясъци на библиотеката JQuery. която произвежда и филтриране на изображения. Това е всичко, което идва на филтриране.
Сега, за да увеличите изображението в прозореца на изскачащи прозорци. Тук всичко е много по-лесно.
JQuery # 40; "А [относителен ^ = 'prettyPhoto']" # 41. prettyPhoto # 40; # 123;
animationSpeed. "Fast".
слайдшоу. 5000.
тема. "Facebook".
SHOW_TITLE. невярно.
overlay_gallery. фалшив
# 125; # 41; ;
Проследяване на кликванията върху връзката, която атрибут отн започва с prettyPhoto. След това става дума в prettyPhoto библиотека. и изображението по чудо се увеличи. Между другото, ние също преминават множество параметри. Такива като скоростта на анимацията - бързо, забавянето на слайд шоу - 5 секунди, Facebook тема дизайн (само 5, така че те са в снимки / prettyPhoto папката), както и да забрани показването на имената на изображенията и увеличаване на изображението, когато движите мишката. Пълна документация на prettyPhoto можете да намерите тук