There are two others topics about this, but they don't help me.
I have this html:
<div class="portfolio_inner_area">
<div class="portfolio_filter">
<ul>
<li data-filter="*" class="active"><a href=""> All</a></li>
<li data-filter=".photography"><a href="">ARCHITECTURE</a></li>
<li data-filter=".branding"><a href="">Building</a></li>
<li data-filter=".webdesign"><a href="">CONSTRUCTION</a></li>
<li data-filter=".adversting"><a href="">DESIGN</a></li>
<li data-filter=".painting"><a href="">Painting</a></li>
</ul>
</div>
<div class="portfolio_item">
<div class="grid-sizer"></div>
<div class="single_facilities col-xs-4 p0 painting photography adversting">
<div class="single_facilities_inner">
<img src=".jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 webdesign">
<div class="single_facilities_inner">
<img src=".jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 painting p0 photography branding">
<div class="single_facilities_inner">
<img src=".jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 adversting webdesign adversting">
<div class="single_facilities_inner">
<img src=".jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 painting adversting branding">
<div class="single_facilities_inner">
<img src=".jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 webdesign photography magazine adversting">
<div class="single_facilities_inner">
<img src=".jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
and JS isotope code:
//* Isotope Js
function portfolio_isotope(){
if ( $('.portfolio_item, .portfolio_2 .portfolio_filter ul li').length ){
// Activate isotope in container
$(".portfolio_item").imagesLoaded( function() {
$(".portfolio_item").isotope({
itemSelector: ".single_facilities",
layoutMode: 'masonry',
percentPosition:true,
masonry: {
columnWidth: ".grid-sizer, .grid-sizer-2"
}
});
});
// Activate isotope in container
$(".portfolio_2").imagesLoaded( function() {
$(".portfolio_2").isotope({
itemSelector: ".single_facilities",
layoutMode: 'fitRows',
});
});
// Add isotope click function
$(".portfolio_filter ul li").on('click',function(){
$(".portfolio_filter ul li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr("data-filter");
$(".portfolio_item, .portfolio_2").isotope({
filter: selector,
animationOptions: {
duration: 450,
easing: "linear",
queue: false,
}
});
return false;
});
}
};
It shows automatically all images when page is loaded. So i tried to ment this row:
<li data-filter="*" class="active"><a href=""> All</a></li>
It delete it from menu, but still shows all images on page load. If I set class="active" on another category it is marked on page load, but still shows all images and if I click on it, then it shows only images for that category (but after click).
Any ideas, how to fix this?
JSFiddle
There are two others topics about this, but they don't help me.
I have this html:
<div class="portfolio_inner_area">
<div class="portfolio_filter">
<ul>
<li data-filter="*" class="active"><a href=""> All</a></li>
<li data-filter=".photography"><a href="">ARCHITECTURE</a></li>
<li data-filter=".branding"><a href="">Building</a></li>
<li data-filter=".webdesign"><a href="">CONSTRUCTION</a></li>
<li data-filter=".adversting"><a href="">DESIGN</a></li>
<li data-filter=".painting"><a href="">Painting</a></li>
</ul>
</div>
<div class="portfolio_item">
<div class="grid-sizer"></div>
<div class="single_facilities col-xs-4 p0 painting photography adversting">
<div class="single_facilities_inner">
<img src="https://i.ibb.co/6sJ72xx/sv-6.jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 webdesign">
<div class="single_facilities_inner">
<img src="https://i.ibb.co/ZVwt1mP/sv-1.jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 painting p0 photography branding">
<div class="single_facilities_inner">
<img src="https://i.ibb.co/dDm9P1S/sv-2.jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 adversting webdesign adversting">
<div class="single_facilities_inner">
<img src="https://i.ibb.co/h165CJ0/sv-3.jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 painting adversting branding">
<div class="single_facilities_inner">
<img src="https://i.ibb.co/RcRkDRR/sv-4.jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="single_facilities col-xs-4 p0 webdesign photography magazine adversting">
<div class="single_facilities_inner">
<img src="https://i.ibb.co/QHj581r/sv-5.jpg" alt="">
<div class="gallery_hover">
<h4>Construction</h4>
<ul>
<li><a href="#"><i class="fa fa-link" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
and JS isotope code:
//* Isotope Js
function portfolio_isotope(){
if ( $('.portfolio_item, .portfolio_2 .portfolio_filter ul li').length ){
// Activate isotope in container
$(".portfolio_item").imagesLoaded( function() {
$(".portfolio_item").isotope({
itemSelector: ".single_facilities",
layoutMode: 'masonry',
percentPosition:true,
masonry: {
columnWidth: ".grid-sizer, .grid-sizer-2"
}
});
});
// Activate isotope in container
$(".portfolio_2").imagesLoaded( function() {
$(".portfolio_2").isotope({
itemSelector: ".single_facilities",
layoutMode: 'fitRows',
});
});
// Add isotope click function
$(".portfolio_filter ul li").on('click',function(){
$(".portfolio_filter ul li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr("data-filter");
$(".portfolio_item, .portfolio_2").isotope({
filter: selector,
animationOptions: {
duration: 450,
easing: "linear",
queue: false,
}
});
return false;
});
}
};
It shows automatically all images when page is loaded. So i tried to ment this row:
<li data-filter="*" class="active"><a href=""> All</a></li>
It delete it from menu, but still shows all images on page load. If I set class="active" on another category it is marked on page load, but still shows all images and if I click on it, then it shows only images for that category (but after click).
Any ideas, how to fix this?
JSFiddle
Share Improve this question edited May 6, 2021 at 8:56 MorganFreeFarm asked Jan 3, 2019 at 9:42 MorganFreeFarmMorganFreeFarm 3,7338 gold badges25 silver badges49 bronze badges 2- 1 Not downvoter, but you need to explain more about your expected output. and can you please try to create snippet? – Just code Commented Jan 9, 2019 at 9:34
- @Justcode You are right, question was edited + jsFiddle :) – MorganFreeFarm Commented Jan 9, 2019 at 10:08
1 Answer
Reset to default 12 +50ok so I understand what you are expecting you want to remove all options from the isotope
First remove
<li data-filter="*" ><a href=""> All</a></li>
secondly add active class to first one
<li data-filter=".photography" class="active"><a href="">ARCHITECTURE</a></li>
and when initializing isotope you can add fileter property as the photography.
$(".portfolio_item").isotope({
itemSelector: ".single_facilities",
layoutMode: 'masonry',
percentPosition:true,
filter: '.photography',
masonry: {
columnWidth: ".grid-sizer, .grid-sizer-2"
}
});
check this line
filter: '.photography',
Check this documentation, you can have a control over the filter, you can easily filter out by applying the class over it.
$grid.isotope({ filter: '*' })
Demo