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