Title: jQuery - Multiple Image Filters on same page
Tags: javascript;jquery;html;css
Question: I have 2 sections, each of those sections has an Image filter, however when I press a button to filter the images, lets say from filter 2, it also hides the all the images from filter 1.
I'm using: data-filter=".categoryofimages"
You can see the issue directly on the website:
nimvoker.com
On the "achievements" section is the 1st filter and "art &amp; design skills" is the 2nd one.
Some file paths are not correct because of the format(jpg, png, etc) but that it still displays the "missing image" symbol so it shouldn't matter in regards to solving the issue.
Both filters must work independently.
Here is an example of 2 filters making conflict:
http://codepen.io/anon/pen/NPvdBw
here is the js:
$(function(){
// Filter portfolio
$(window).load(function(){
var $container = $('.popup-portfolio');
$container.css({visibility:'visible'});
var isotopePortfolio = function(filter){
$container.isotope({
filter: filter,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
masonry: {
isFitWidth: true,
isResizable: true,
gutter: 15
}
});
};
isotopePortfolio('*');
$('.filter-portfolio a').click(function(e){
e.preventDefault();
$('.filter-portfolio li').removeClass('active');
$('.filter-portfolio a').removeClass('disabled');
$(this).parent('li').addClass('active');
$(this).addClass('disabled');
var selector = $(this).attr('data-filter');
isotopePortfolio(selector);
});
// Only animate elements when using non-mobile devices
if (jQuery.browser.mobile === false)
$('.portfolio-item &gt; .inner-content').each(function(i)
{
var element = $(this),
itemsDelay   = ( isNaN($(this).data('animation-delay')) ? 50 : $(this).data('animation-delay') );
element.css('opacity', 0).one('inview', function(isInView) {
if (isInView)
{
setTimeout(function(){
element.addClass('animated fadeInUp').css('opacity', 1);
} , itemsDelay * i);
}
});
});
$('.popup-portfolio').magnificPopup({
delegate: 'a',
type: 'image',
fixedContentPos: false,
gallery: {
enabled: true,
preload: [0,2],
navigateByImgClick: true,
arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"&gt;</button&gt;',
tPrev: 'Previous (Left arrow key)',
tNext: 'Next (Right arrow key)'
Comment: I'm open to other solutions

Comment: here http://codepen.io/anon/pen/NPvdBw

Comment: Please create a [MCVE](http://stackoverflow.com/help/mcve) instead of linking to your live website.

Here is the accepted answer: You have this line in your code:
var $container = $('.isotope')
It means that $container variable will contain all .isotope divs (two in this case). Now the following line in your filter handlers:
$container.isotope({ filter: filterValue });
applies the filter on both elements.
Solution: use jQuery to the identify .button-group which was clicked and apply the filter on the corresponding .isotope:
// generalized function to handle toggle checked and
// apply filter functions for all button groups
$('.button-group').on('click', 'button', function() {
var $buttonGroup = $(this).closest(".button-group");
// toggle checked
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
// apply filter
var filterValue = $(this).attr('data-filter');
filterValue = filterFns[filterValue] || filterValue;
$buttonGroup.next(".isotope").isotope({ filter: filterValue });
Original Pen
Updated Pen

Here is another answer: That is happening because you use the same ID/CLASS.
Example :
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows'
which is used on #filters and #filters2
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
$('#filters2').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
Try something like this.
On this HTML add a unique ID ' id="unique-id-1" '
<div class="filter-portfolio"&gt;
<ul id="unique-id-1" class="list-unstyled"&gt;
<li class="active page-scroll"&gt; <a href="#rj-portfolio" data-filter="*" class="btn btn-custom disabled"&gt;All</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio" data-filter=".college" class="btn btn-custom"&gt;College</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio" data-filter=".highschool" class="btn btn-custom"&gt;Highschool</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio" data-filter=".childhood" class="btn btn-custom"&gt;Childhood</a&gt; </li&gt;
</ul&gt;
</div&gt;
<div id="unique-id-1-portfolio" class="popup-portfolio three-columns"&gt;
<div class="portfolio-item grow illustration calligraphy"&gt;
<div class="inner-content"&gt;
<div class="portfolio-content"&gt;
<div class="portfolio-detail"&gt; <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" title="Hover Effect 1 - Grow"&gt;
<div class="portfolio-text"&gt;
<h4&gt;The Title</h4&gt;
<p&gt;Subtitle</p&gt;
</div&gt;
</a&gt; </div&gt;
</div&gt;
<img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" alt="" class="img-responsive"/&gt; </div&gt;
</div&gt;
<div class="portfolio-item grow illustration calligraphy"&gt;
<div class="inner-content"&gt;
<div class="portfolio-content"&gt;
<div class="portfolio-detail"&gt; <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" title="Hover Effect 1 - Grow"&gt;
<div class="portfolio-text"&gt;
<h4&gt;The Title</h4&gt;
<p&gt;Subtitle</p&gt;
</div&gt;
</a&gt; </div&gt;
</div&gt;
<img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" alt="" class="img-responsive"/&gt; </div&gt;
</div&gt;
</div&gt;
Use this :
$('#unique-id-1 li a').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
filterValue = filterFns[ filterValue ] || filterValue;
$( '#unique-id-1-portfolio' ).isotope({ filter: filterValue });
and for this
<div class="filter-portfolio"&gt;
<ul id="unique-id-2" class="list-unstyled"&gt;
<li class="active page-scroll"&gt; <a href="#rj-portfolio3" data-filter="*" class="btn btn-custom disabled"&gt;All</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".calligraphy" class="btn btn-custom"&gt;Calligraphy</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".lifedrawing" class="btn btn-custom"&gt;LifeDrawing</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".logodesign" class="btn btn-custom"&gt;LogoDesign</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".manga" class="btn btn-custom"&gt;Manga</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".marketing" class="btn btn-custom"&gt;Marketing</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".miscart" class="btn btn-custom"&gt;Miscart</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".technical" class="btn btn-custom"&gt;Technical</a&gt; </li&gt;
<li class="page-scroll"&gt; <a href="#rj-portfolio3" data-filter=".uidesign" class="btn btn-custom"&gt;UIdesign</a&gt; </li&gt;
</ul&gt;
</div&gt;
<div id="unique-id-2-portfolio" class="popup-portfolio three-columns"&gt;
<div class="portfolio-item grow illustration calligraphy"&gt;
<div class="inner-content"&gt;
<div class="portfolio-content"&gt;
<div class="portfolio-detail"&gt; <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" title="Hover Effect 1 - Grow"&gt;
<div class="portfolio-text"&gt;
<h4&gt;The Title</h4&gt;
<p&gt;Subtitle</p&gt;
</div&gt;
</a&gt; </div&gt;
</div&gt;
<img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-001.jpg" alt="" class="img-responsive"/&gt; </div&gt;
</div&gt;
<div class="portfolio-item grow illustration calligraphy"&gt;
<div class="inner-content"&gt;
<div class="portfolio-content"&gt;
<div class="portfolio-detail"&gt; <a href="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" title="Hover Effect 1 - Grow"&gt;
<div class="portfolio-text"&gt;
<h4&gt;The Title</h4&gt;
<p&gt;Subtitle</p&gt;
</div&gt;
</a&gt; </div&gt;
</div&gt;
<img src="../../assets/img/rj-portfolio/artanddesign/calligraphy/calligraphy-sample-002.jpg" alt="" class="img-responsive"/&gt; </div&gt;
</div&gt;
</div&gt;
Use this :
$('#unique-id-2 li a').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
filterValue = filterFns[ filterValue ] || filterValue;
$( '#unique-id-2-portfolio' ).isotope({ filter: filterValue });
Hope this will help you bro..

Here is another answer: That is a lot of  code to look at but at least to give other some details the file
http://nimvoker.com/assets/js/features/portfolio.js
has this:
var isotopePortfolio = function(filter){
$container.isotope({
filter: filter,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
masonry: {
isFitWidth: true,
isResizable: true,
gutter: 15
}
});
};
$('.filter-portfolio a').click(function(e){
e.preventDefault();
$('.filter-portfolio li').removeClass('active');
$('.filter-portfolio a').removeClass('disabled');
$(this).parent('li').addClass('active');
$(this).addClass('disabled');
var selector = $(this).attr('data-filter');
isotopePortfolio(selector);
});
And that's great but the problem is both your filters in #rj-portfolio3 and #rj-portfolio have the same classes.
If I'm reading this correctly you have the ability to add a text selector in data-filter so you might want to try to be a bit more precise
And make your filter buttons like:
<a href="#rj-portfolio3" data-filter="#rj-portfolio3 .lifedrawing" class="btn btn-custom"&gt;LifeDrawing</a&gt;
It's hard to test with so much code and no fiddle so please excuse me if I'm way off base.
Looked again, the #rj-portfolio3 id is way above the $container in the tree, so you'll need to do some more work... try something like
<a href="#rj-portfolio3" data-filter=".lifedrawing:not(.achievements)" class="btn btn-custom"&gt;LifeDrawing</a&gt;
etc etc for all your buttons, then for all your images add the classes "achievements" and "art" for each respective thumbnail. According to http://isotope.metafizzy.co/filtering.html this should work better.... again sorry hard to test, no fiddle, too much code.
Comment for this answer: putting :not(.achievements) will hide everything with class "achievements" so it doesnt make difference, there must be a way to have both filter function independently
Comment for this answer: the problem is, that the users might view the first gallery, and when viewing the 2nd one, when they click on the 2nd filter, the viewport will stay high if the images where added in the 1st filter(because the images extended the page), or stay down if they are removed (because removing the images takes less space)
Comment for this answer: @BobXplosion so then, how about `LifeDrawing` showing both livedrawnings and all the achievements?
Comment for this answer: @BobXplosion yeah, I can see how this gets complicated, I feel there's no quick easy answer to this (at least that I'm able to come up with) Perhaps someone else will be able to help you further. I'd lean towards rethinking the display on your site completely to have each main section in div's that are completely hidden and re-initializing each time a section is shown, or making content load in the main area via something like an ajax, etc, etc. But I feel that's not the 'feel' you're going for on your site. Best of luck to you

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:01/25/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html><css>', 'Title': 'jQuery - Multiple Image Filters on same page', 'ViewCount': 1564, 'id': 28133952, 'user_AboutMe': '', 'user_AccountId': 2845810.0, 'user_DisplayName': 'Bob Lozano', 'user_Reputation': 808.0, 'user_Views': 172.0, 'user_id': 2444251.0}}