Active link when the page loads (photos on isotope.js)?

Good day,

There was here such question, I can not understand. Please help, maybe someone can help.

So:
1. There is such a page which has a photo gallery, sortable: http://galaxyanalytics.net/demos/mendoz/mendoz-sui...

2. The sort function is made using isotope.js here the page of this plugin: https://isotope.metafizzy.co/

Below, the HTML code which displays the gallery:

<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 wedding activities">
 <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 -->


This is a JS that on click controls which photo (e.g. Spa, Rooms, Wedding etc.) to display in the gallery:

galleryMasonaryLayout function() {
 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>');
});
};
 }


I would like to understand how from JS you can control how to make one of the links (example: Spa) is active immediately when the page loads?

Such JS otsortirovyvaya photos marked as ".spa", but the link "Spa" remains inactive.

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

How is it possible in JS to specify the name of the link to make it active then? Ie, I can't understand how in JS to access the element for example:
<li class="filter" data-filter=".spa"><span>Spa</span></li>


Thank you very much for the help!
March 19th 20 at 09:07
0 answer

Find more questions by tags jQueryJavaScript