Impossible d'obtenir une lightbox pour ignorer les éléments cachés dans une liste dynamique jQuery

Question

Nettus + a ce nice jQuery code pour filtrer et afficher des <li> s spécifiques à partir d'un <ul> lorsqu'une catégorie est cliquée. Par exemple, lorsque vous cliquez sur le lien 'design', seuls les 'modèles' <li> s sont affichés et le reste du portefeuille <li> s est masqué. Cependant, quand je le combine avec une lightbox comme Yoxview (visualiseur d'image jQuery plugin), la lightbox montre les <li> s de l'ensemble du portefeuille au lieu de montrer simplement la catégorie spécifique qui a été cliquée et filtrée.

Comment puis-je obtenir la visionneuse pour afficher uniquement les <li> s qui sont actuellement affichés sur la page et ignorer les <li> s cachés? Merci pour toute aide.

$(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

Comment puis-je obtenir la visionneuse pour montrer la que les <li> s qui sont actuellement affichés sur la page et ignorer les cachés <li> s?

Vous pouvez utiliser le sélecteur de filtre :visible qui ne concerneront que les éléments qui sont quelque chose de visible comme ceci:

$('#ul_id li:visible') 

Le sélecteur ci-dessus ne fonctionnera que sur les lis qui sont à l'intérieur de l'élément parent avec id ul_id et sont visibles.