Привет всем!
Помогите пожалуйста сделать так, чтобы при загрузке страницы была стартовая фильтрация по categ-0
<a href="#" data-filter=".categ-0" class=" active"><h2>Все модели</h2></a>
, а не со всеми изображениями
Есть скрипт
// ISOTOPE //
if ((typeof $.fn.imagesLoaded !== 'undefined') && (typeof $.fn.isotope !== 'undefined')) {
$(".isotope").imagesLoaded( function() {
var container = $(".isotope");
container.isotope({
itemSelector: '.isotope-item',
layoutMode: 'masonry',
transitionDuration: '0.8s'
});
$(".filter li a").on("click", function() {
$(".filter li a").addClass("active");
var selector = $(this).attr("data-filter");
container.isotope({
filter: selector
});
return false;
});
$(window).resize(function() {
container.isotope();
});
});
}
и html
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="filter">
<li>
<a href="#" data-filter=".categ-0" class=" active"><h2>Все модели</h2></a>
</li>
<li>
<a href="#" data-filter=".categ-1"><h2>Смартфоны</h2></a>
</li>
<li>
<a href="#" data-filter=".categ-2"><h2>Планшеты</h2></a>
</li>
<li>
<a href="#" data-filter=".categ-3"><h2>Ноутбуки</h2></a>
</li>
<li>
<a href="#" data-filter=".categ-4"><h2>ПК</h2></a>
</li>
</ul>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
<br>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="isotope col-3 gutter">
<div class="isotope-item categ-0">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\brands\Apple.png" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Смартфоны</a></h4>
<h4><a href="portfolio-single.htm">Планшеты</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
<a class="fancybox zoom-action" data-fancybox-group="portfolio" href="images\brands\Apple.png">+</a>
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-2">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\brands\Apple.png" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Apple iPad NEW</a></h4>
<h4><a href="portfolio-single.htm">A View Over the Bridge</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-1 categ-3">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-18.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Golden Gate</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-1 categ-4">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-19.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Old Men on Bench</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-3 categ-4">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-20.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Mockup: Open Book</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-1 categ-2">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-21.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Mockup: Travel Magazine</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-2 categ-3">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-22.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Product Photography</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-1 categ-2 categ-4">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-23.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Statue of Liberty</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-2 categ-3 categ-4">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-24.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Mockup: Book Covers</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
<div class="isotope-item categ-1 categ-3">
<div class="portfolio-item">
<div class="portfolio-item-thumbnail">
<img src="images\portfolio\image-25.jpg" alt="">
<div class="portfolio-item-hover">
<div class="portfolio-item-description">
<h4><a href="portfolio-single.htm">Most Iconic Buildings</a></h4>
<p>Photography</p>
</div><!-- portfolio-item-description -->
</div><!-- portfolio-item-hover -->
</div><!-- portfolio-item-thumbnail -->
</div><!-- portfolio-item -->
</div><!-- isotope-item -->
</div><!-- isotope -->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
