Question

Nettus+ has this nice jQuery code to filter out and show specific <li>s from a <ul> when a category is clicked. For example, when the ‘design’ link is clicked, only the ‘design’ <li>s are shown and the rest of the portfolio <li>s are hidden. However, when I combine it with a lightbox like Yoxview (image viewer jQuery plugin), the lightbox shows the <li>s from entire portfolio instead of just showing the specific category that was clicked on and filtered out.

How can I get the the lightbox to show only the <li>s that are currently shown on the page and ignore the hidden <li>s? Thanks for any help.

    $(document).ready(function() {
    $('ul#filter a').click(function() {
        $(this).css('outline','none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','-');

        if(filterVal == 'all') {
            $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
            $('ul#portfolio li').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }

        return false;
    });
});


<ul id="filter">  
     <li class="current"><a href="#">All</a></li>  
     <li><a href="#">Design</a></li>  
     <li><a href="#">Development</a></li>  
     <li><a href="#">CMS</a></li>  
     <li><a href="#">Integration</a></li>  
</ul>  

<ul id="portfolio">  
     <li class="cms integration">  
         <a href="#"><img src="images/a-list-apart.png" />A List Apart</a>  
     </li>  
     <li class="integration design">  
         <a href="#"><img src="images/apple.png" />Apple</a>  
     </li>  
     <li class="design development">  
         <a href="#"><img src="images/cnn.png" />CNN</a>  
     </li>  
     <li class="cms">  
         <a href="#"><img src="images/digg.png" />Digg</a>  
     </li>  
     <li class="design cms integration">  
         <a href="#"><img src="images/espn.png" />ESPN</a>  
     </li>  
</ul>  

Answer 1

How can I get the the lightbox to show
only the <li>s that are currently
shown on the page and ignore the
hidden <li>s?

You can use the :visible filter selector that will only affect the elements that are visible something like this:

$('#ul_id li:visible')

The above selector will work only on those lis that are inside the parent element with id ul_id and are visible.