Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.138.114.94] |
|
Сообщ.
#1
,
|
|
|
Добрый день,
Возник вот такой вопрос, никак не могу разобраться. Прошу помощи, может быть кто-нибудь сможет помочь. Итак: 1. Есть вот такая страница, на которой размещена фотогалерея, с возможностью сортировки: http://galaxyanalytics.net/demos/mendoz/me...uit-preview/... 2. Функция сортировки сделана с помощью isotope.js, вот здесь страница этого плагина: Isotope - Filter & sort magical layouts Ниже, HTML-код который отображает фотогалерею: <section class="sec-pad gallery-page-one gallery-style-two"> <div class="thm-container"> <div class="gallery-filter"> <ul class="post-filter masonary text-center"> <li class="filter active" data-filter=".masonary-item"><span>All</span></li> <li class="filter " data-filter=".spa"><span>Spa</span></li> <li class="filter " data-filter=".rooms"><span>Rooms</span></li> <li class="filter " data-filter=".wedding"><span>Wedding</span></li> <li class="filter " data-filter=".activities"><span>Activities</span></li> <li class="filter " data-filter=".restaurant"><span>Restaurant</span></li> <li class="filter " data-filter=".pool"><span>Pool</span></li> </ul><!-- /.post-filter --> </div><!-- /.gallery-filter --> <div class="row masonary-layout filter-layout" data-filter-class="filter"> <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item spa rooms"> <div class="single-gallery-style-two"> <div class="img-box"> <img src="img/gallery-p-1-1.jpg" alt="Awesome Image"/> <div class="overlay"> <div class="box"> <div class="content"> <a href="#"><h3>Activities</h3></a> <a href="img/gallery-p-1-1.jpg" class="icon icon-FullScreen img-popup"></a> </div><!-- /.content --> </div><!-- /.box --> </div><!-- /.overlay --> </div><!-- /.img-box --> </div><!-- /.single-gallery-style-two --> </div><!-- /.single-filter-item --> <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item activities wedding"> <div class="single-gallery-style-two"> <div class="img-box"> <img src="img/gallery-p-1-4.jpg" alt="Awesome Image"/> <div class="overlay"> <div class="box"> <div class="content"> <a href="#"><h3>Activities</h3></a> <a href="img/gallery-p-1-4.jpg" class="icon icon-FullScreen img-popup"></a> </div><!-- /.content --> </div><!-- /.box --> </div><!-- /.overlay --> </div><!-- /.img-box --> </div><!-- /.single-gallery-style-two --> </div><!-- /.single-filter-item --> <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item rooms"> <div class="single-gallery-style-two"> <div class="img-box"> <img src="img/gallery-p-1-7.jpg" alt="Awesome Image"/> <div class="overlay"> <div class="box"> <div class="content"> <a href="#"><h3>Activities</h3></a> <a href="img/gallery-p-1-7.jpg" class="icon icon-FullScreen img-popup"></a> </div><!-- /.content --> </div><!-- /.box --> </div><!-- /.overlay --> </div><!-- /.img-box --> </div><!-- /.single-gallery-style-two --> </div><!-- /.single-filter-item --> <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item rooms"> <div class="single-gallery-style-two"> <div class="img-box"> <img src="img/gallery-p-1-8.jpg" alt="Awesome Image"/> <div class="overlay"> <div class="box"> <div class="content"> <a href="#"><h3>Activities</h3></a> <a href="img/gallery-p-1-8.jpg" class="icon icon-FullScreen img-popup"></a> </div><!-- /.content --> </div><!-- /.box --> </div><!-- /.overlay --> </div><!-- /.img-box --> </div><!-- /.single-gallery-style-two --> </div><!-- /.single-filter-item --> </div> </div><!-- /.thm-container --> </section><!-- /.sec-pad --> Это JS, который по клику управляет тем, какие элементы (например Spa, Rooms, Wedding etc.) отобразить в галереи: function galleryMasonaryLayout() { if ($('.masonary-layout').length) { $('.masonary-layout').isotope({ layoutMode: 'masonry' }); } if ($('.post-filter').length) { $('.post-filter li').children('span').on('click', function() { var Self = $(this); var selector = Self.parent().attr('data-filter'); var postFilterLi = $('.post-filter li'); postFilterLi.children('span').parent().removeClass('active'); Self.parent().addClass('active'); $('.filter-layout').isotope({ filter: selector, animationOptions: { duration: 500, easing: 'linear', queue: false } }); return false; }); } if ($('.post-filter.has-dynamic-filter-counter').length) { // var allItem = $('.single-filter-item').length; var activeFilterItem = $('.post-filter.has-dynamic-filter-counter').find('li'); activeFilterItem.each(function() { var filterElement = $(this).data('filter'); var count = $('.gallery-content').find(filterElement).length; $(this).children('span').append('<span class="count"><b>' + count + '</b></span>'); }); }; } Я бы хотел понял, как из JS можно управлять тем, как сделать один из элемементов "All, Spa, Rooms, Wedding, Activities, Restaurant, Pool" активным? Например такой JS отсортировывает фотографии помеченные как ".spa", но при этом сама ссылка "Spa" остаётся неактивной. $('.filter-layout').isotope({filter: '.spa'}); Как можно в JS указать имя этой ссылки, чтобы сделать потом её активной? Т.е. я не могу понять, как в JS обратиться к элементу например <li class="filter " data-filter=".spa"><span>Spa</span></li> Спасибо большое за помощь! |