Активная ссылка при загрузке страницы (фотогалерея на isotope.js)?

Question

[rondob]

Добрый день,

Возник вот такой вопрос, никак не могу разобраться. Прошу помощи, может быть кто-нибудь сможет помочь.

Итак:
1. Есть вот такая страница, на которой размещена фотогалерея, с возможностью сортировки: http://galaxyanalytics.net/demos/mendoz/mendoz-sui...

2. Функция сортировки сделана с помощью isotope.js, вот здесь страница этого плагина: https://isotope.metafizzy.co/

Ниже, 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 можно управлять тем, как сделать одну из ссылок (например: Spa) активной сразу при загрузке страниц?

Например такой JS отсортировывает фотографии помеченные как ".spa", но при этом сама ссылка "Spa" остаётся неактивной.

$('.filter-layout').isotope({filter: '.spa'});

Как можно в JS указать имя этой ссылки, чтобы сделать потом её активной? Т.е. я не могу понять, как в JS обратиться к элементу например:

<li class="filter " data-filter=".spa"><span>Spa</span></li>

Спасибо большое за помощь!