I have a collection of various images on my website coded with isotope. My question is, how can I hide specific images that I don't want to display initially, but have them appear when needed? I have managed to create a "show all" list using the code ":not(.new, .black)", but before the user clicks on "show all," all images are shown without any filtering. Here's my code:
<div class="container">
<section>
<ul class="portfolio_filters"></a>
<li><a href="#" data-filter=":not(.new,.black,industrial,.mix).all">Show all</a></li>
<li><a href="#" data-filter=".new">New Logos</a></li>
<li><a href="#" data-filter=".black ">Black & White</a></li>
<li><a href="#" data-filter=".industrial">Industrial</a></li>
<li><a href="#" data-filter=".mix">Mix</a></li>
</ul>
</section>
Image link
<section class="portfolio_masonry">
<div class="row isotope_portfolio_container">
<div class="new col-sm-4 col-md-4">
<div class="portfolio_item"> <a href="images/portfolio/lenses.jpg" class="lightbox"> <img src="images/portfolio/lenses.jpg" alt="Community & Non-Profit">
<div class="overlay">
<div class="desc">
<h4>Lenses to Their World</h4>
<span class="cross"></span> </div></a>
</div>
</a> </div>
</div>
Here is my isotopes code
//------ISOTOPE-------------------------------------
// cache container
var container = jQuery('.isotope_portfolio_container');
// initialize isotope
container.isotope({
});
jQuery('.portfolio_filters a[data-filter="*"]').addClass('active');
// filter items when filter link is clicked
jQuery('.portfolio_filters a').click(function(){
jQuery('.portfolio_filters a').removeClass('active');
jQuery(this).addClass('active');
var selector = jQuery(this).attr('data-filter');
container.isotope({ filter: selector });
return false;
});
How can I hide certain images on the start page without clicking on one of the lists, and then make them visible in the selected lists? Thank you in advance.