hide images and release the space.

hide images and release the space.

I have a lightbox gallery. Everything is fine but I wanted to make it filterable.
I used a tutorial and ended up with this code:


HTML:

  1. <ul id="filter">
        <li class="current"><a href="#">All</a></li>
        <li><a href="#">Kitchens</a></li>
        <li><a href="#">Bathrooms</a></li>
        <li><a href="#">CAD</a></li>
    </ul>

    <script>
    jQuery(function () {
      jQuery.thumbGrid.transitions.slideLeft = {in: {x:"0%", opacity:0}, out: {x:"-100%", opacity:0}};
      jQuery.thumbGrid.transitions.slideRight = {in: {x:"0%", opacity:0}, out: {x:"100%", opacity:0}};

      jQuery("[data-thumbgrid]").thumbGrid();
    });
    </script>

  3. <section class="content">
  4.   <div id="thumbGrid" class=""
  5.              data-thumbgrid="true"
  6.              data-effect="slideInverse"
  7.              data-delay="60"
  8.              data-timing="800"
  9.              data-pagination="6"
  10.              data-galleryeffectnext="slideLeft"
  11.              data-galleryeffectprev="slideRight"
  12.              data-cover="true">
  13.     <img src="img/LR/01.jpg" class="kitchens" alt="img04" data-highres="img/HR/01.jpg" data-captio\
  14. n="text1"/>
  15.     <img src="img/LR/02.jpg" class="kitchens" alt="img02" data-highres="img/HR/02.jpg" />
  16.     <img src="img/LR/03.jpg" class="bathrooms" alt="img01" data-highres="img/HR/03.jpg" data-capti\
  17. on="text2"/>
  18.     <img src="img/LR/04.jpg" class="cad" alt="img03" data-highres="img/HR/04.jpg" data-caption="text3"/>
  19.    </div>
  20. </section>

jquery:





  1. $(document).ready(function(){                                                                     
        $('#filter a').click(function() {                                                             
            $(this).css('outline','none');                                                            
            $('#filter li.current').removeClass('current');                                           
            $(this).parent().addClass('current');                                                     
                                                                                                      
            var filterVal = $(this).text().toLowerCase().replace(' ','-');                            
                                                                                                      
            if(filterVal == 'all') {                                                                  
                $('#thumbGrid img.hidden').fadeIn('slow').removeClass('hidden');                      
            } else {                                                                                  
                $('#thumbGrid img').each(function() {                                                 
                    if(!$(this).hasClass(filterVal)) {                                                
                        $(this).fadeOut('normal').addClass('hidden');                                 
                    } else {                                                                          
                        $(this).fadeIn('slow').removeClass('hidden');                                 
                    }                                                                                 
                });                                                                                   
            }                                                                                         
            return false;                                                                             
        });                                                                                           
    });       


Also tried hide():


  2. $(document).ready(function(){
  3.     $('#filter a').click(function() {
  4.         $(this).css('outline','none');
  5.         $('#filter li.current').removeClass('current');
  6.         $(this).parent().addClass('current');
  7.         var filterVal = $(this).text().toLowerCase().replace(' ','-');
  8.         if(filterVal == 'all') {
  9.             $('#thumbGrid img.hidden').removeClass('hidden').css('display', 'block');
  10.         } else {
  11.             $('#thumbGrid img').each(function() {
  12.                 if(!$(this).hasClass(filterVal)) {
  13.                     $(this).addClass('hidden').css('display', 'none');
  14.                 } else {
  15.                     $(this).removeClass('hidden').css('display', 'block');
  16.                 }
  17.             });
  18.         }
  19.         return false;
  20.     });
  21. });

In both cases, when I click on the categories they appear/disappear as intended. The only problem is that when an img gets hidden, there's still a gray container occupying the space. How can I free the space that a hidden img would normally occupy?


Thank you