jQuery Forum

I'm using this fantastic   FILTERABLE PORTFOLIO:  http://webdesigntunes.com/tutorial/filterable/

But now i´am trying to configure the standard filter All (*) with the exception of one category. 

I have these categories:

1.  <nav class="primary clearfix">
                       <ul class="conteudo_corrente">
                         <li><a href="#" class="selected" data-filter="*">All</a></li>
                         <li><a href="#" data-filter=".product">PRODUCT</a></li>
                         <li><a href="#" data-filter=".packaging">GRAPHIC</a></li>
                         <li><a href="#" data-filter=".identity">WEB</a></li>
                         <li><a href="#" data-filter=".others">OTHERS</a></li>
    </ul>
                   </nav>

I'm searching for something that exclude the OTHERS category (do not show up on ALL category) only when i click in OTHERS it show the projects.

A think it is in here:

2. <script>
3. //Portfolio
4. var $container = $('.portfolio');
5. $container.isotope({
6. filter: '*',
7. animationOptions: {
8. duration: 750,
9. easing: 'linear',
10. queue: false,
11. }
12. });
13. 
    
14. $('nav.primary ul a').click(function(){
15. var selector = $(this).attr('data-filter');
16. $container.isotope({
17. filter: selector,
18. animationOptions: {
19. duration: 750,
20. easing: 'linear',
21. queue: false,
22. }
23. });
24.  return false;
25. });
26. 
    
27. var $optionSets = $('nav.primary ul'),
28.       $optionLinks = $optionSets.find('a');
29.  
30.       $optionLinks.click(function(){
31.          var $this = $(this);
32.  // don't proceed if already selected
33.  if ( $this.hasClass('selected') ) {
34.      return false;
35.  }
36.   var $optionSet = $this.parents('nav.primary ul');
37.   $optionSet.find('.selected').removeClass('selected');
38.   $this.addClass('selected'); 
39. });
40. </script>

Any ideas?

Thank you

I´m trying to use this  FILTERABLE PORTFOLIO: http://webdesigntunes.com/tutorial/filterable/

However I want to use content with multiple images and text. 

I I found this code that works perfectly

INDEX

2. <div id="pholio">
3.         <!-- START PHOLIO -->
4.   <nav class="primary clearfix">
5.                     <ul class="conteudo_corrente">
6.                         <li><a href="#" class="selected" data-filter="*">All</a></li>
7.                         <li><a href="#" data-filter=".web">PRODUCT</a></li>
8.                         <li><a href="#" data-filter=".ill">PRINT</a></li>
9.                         <li><a href="#" data-filter=".logo">WEB</a></li>
10.                         <li><a href="#" data-filter=".video">VIDEO</a></li>
11. 
    
12.                     </ul>
13.                 </nav>
14. 
    
15. 
    
16. <section class="main">
18. <div class="portfolio">
20. <article class="entry video">
21.                 <div id="Descriptiondiv"> 
22.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
23.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT
24. 
    
25.         </div>
26.                  <br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
27. <br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
28. <br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
29.                 
30.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
31.                      <img src="images/portfolio/work1.jpg" alt="">
32. <span class="video-hover">video</span>
33.                     </a>
34.                     
35. </article>
36.         </div>

CSS

2. #Descriptiondiv {
3.    width:50% !important;
4.    /*height:50%;*/
5.    height:1800px;
6.    display:none;
7.    
8.    }

the problem is when i enter a new content with different images like thise.

2. <div id="pholio">
3.         <!-- START PHOLIO -->
4.   <nav class="primary clearfix">
5.                     <ul class="conteudo_corrente">
6.                         <li><a href="#" class="selected" data-filter="*">All</a></li>
7.                         <li><a href="#" data-filter=".web">PRODUCT</a></li>
8.                         <li><a href="#" data-filter=".ill">PRINT</a></li>
9.                         <li><a href="#" data-filter=".logo">WEB</a></li>
10.                         <li><a href="#" data-filter=".video">VIDEO</a></li>
11. 
    
12.                     </ul>
13.                 </nav>
14. 
    
15. 
    
16. <section class="main">
18. <div class="portfolio">
20. <article class="entry video">
21.                 <div id="Descriptiondiv"> 
22.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
23.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT
24. 
    
25.         </div>
26.                  <br /><img class="displayed" src="images/portfolio/work_01.jpg" width="70%"/>
27. <br /><img class="displayed" src="images/portfolio/work_02.jpg" width="70%"/>
28. <br /><img class="displayed" src="images/portfolio/work_03.jpg" width="70%"/>
29.                 
30.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
31.                      <img src="images/portfolio/work1.jpg" alt="">
32. <span class="video-hover">video</span>
33.                     </a>
34.                     
35. </article>
36. 
    
37. 
    
39. <article class="entry web">
40.                 <div id="Descriptiondiv"> 
41.                  <IMG class="displayed" src="design/logo.gif" alt="Logo">
42.                  <div style="float:left; padding-top:10px;" class="conteudo_corrente">  CONTENT 22
43. 
    
44.         </div>
45.                  <br /><img class="displayed" src="images/portfolio/work_04.jpg" width="70%"/>
46. <br /><img class="displayed" src="images/portfolio/work_05.jpg" width="70%"/>
47. <br /><img class="displayed" src="images/portfolio/work_06.jpg" width="70%"/>
48.                 
49.                                 <a href="#Descriptiondiv" data-rel="prettyPhoto" title="">
50.                      <img src="images/portfolio/work1.jpg" alt="">
51. <span class="video-hover">video</span>
52.                     </a>
53.                     
54. </article>
55.         </div>

It repeated the same content on the first (entry video) to the second (entry web).

I think the problem is because I'm using the same id = "#Descriptiondiv"

Eu consigo resolver o problema ao colocar vários id. E xample:

CSS

2. #Descriptiondiv {
3.    width:50% !important;
4.    /*height:50%;*/
5.    height:1800px;
6.    display:none;
7.    
8.    }
9.    
10.    #Descriptiondiv2 {
11.    width:50% !important;
12.    /*height:50%;*/
13.    height:1800px;
14.    display:none;
15.    
16.    }

But that's not the best solution.

Can anyone suggest another way?

Thank you and Merry Christmas :)