Для вступления в общество новичков и профессионалов домен-индустрии, пожалуйста нажмите здесь ...

   
 Купля-продажа и обсуждение доменных имён
        

  
Вернуться   Форум о доменах > Дизайн и развитие проектов > Программирование
Регистрация Реноме Правила форума Справка Пользователи Социальные группы Все разделы прочитаны
Программирование PHP, Perl, HTML, XHTML, CSS, JavaScript, MySQL и другие языки кодирования.

Ответ
 
Опции темы
Сегодня
от 149р за .RU
Аренда сервера
2x Intel Hexa-Core Xeon E5-2420
Всего 79 евро!

с видеокартой GeForce GTX 1080 Ti
всего 99 евро!

от 149р за .РФ Реклама на DomenForum.net
Старый 29.03.2019, 19:25   #1
 
Регистрация: 11.01.2012
Сообщений: 262
Доменные сделки: 0
Реноме: 58
Одобрения
Спасибо (Отдано): 105
Спасибо (Получено): 60
Вопросик про сортировку галереи на JavaScript

Добрый день,

При настройке работы вот этой фотогалереи возник вот такой вопрос:

Как можно ЧЕРЕЗ JS указать имя фильтра (например "Spa"), чтобы он отображался по умолчанию?



Код 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 который по клику делает сортировку фотографий:
Код:
    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 вот эта строка отвечает за то, на какой фильтр сейчас нажали:
Код:
var Self = $(this);
Как можно там прописать имя вот этого (.spa) элемента например?
Код HTML:
<li class="filter " data-filter=".spa"><span>Spa</span></li>
Вот этот скрипт устанавливат какие фотографии показать по умолчанию, но не выделяет ссылку "SPA" как активную. А мне нужно этого добиться через JS.

Код:
$('.filter-layout').isotope({filter: '.spa'});
diving вне форума   Ответить с цитированием
Ответ



Реклама

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Закладки Добавить Тема в закладки

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Текущее время: 20:16. Часовой пояс GMT +4.