На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> Вопрос про Isotope.js, Filter & sort magical layouts
    Добрый день,

    Возник вот такой вопрос, никак не могу разобраться. Прошу помощи, может быть кто-нибудь сможет помочь. Итак:
    1. Есть вот такая страница, на которой размещена фотогалерея, с возможностью сортировки: http://galaxyanalytics.net/demos/mendoz/me...uit-preview/...

    2. Функция сортировки сделана с помощью isotope.js, вот здесь страница этого плагина: Isotope - Filter & sort magical layouts

    Ниже, HTML-код который отображает фотогалерею:

    ExpandedWrap disabled
      <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.) отобразить в галереи:


    ExpandedWrap disabled
      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" остаётся неактивной.
    ExpandedWrap disabled
      $('.filter-layout').isotope({filter: '.spa'});


    Как можно в JS указать имя этой ссылки, чтобы сделать потом её активной? Т.е. я не могу понять, как в JS обратиться к элементу например
    ExpandedWrap disabled
      <li class="filter " data-filter=".spa"><span>Spa</span></li>


    Спасибо большое за помощь!
    1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
    0 пользователей:


    Рейтинг@Mail.ru
    [ Script Execution time: 0,0683 ]   [ 14 queries used ]   [ Generated: 25.06.19, 12:43 GMT ]