Shadowbox dans une liste

Question

J'ai un problème pour utiliser shadowbox dans une liste. L'image que j'essaie d'utiliser avec shadowbox est dans une balise li. J'ai essayé d'implémenter shadowbox sur un, qui est en dehors de la liste, et qui fonctionne correctement.

HTML:

<div id="gallery" class="content-2"> 
     <nav id="filter"></nav> 
     <section id="container"> 
      <ul id="stage"> 
       <li data-tags="Print Design"><a rel="shadowbox" href="_img/shots/1.jpg"><img src="_img/shots/1.jpg" alt="Illustration" /></a></li> 
       <li data-tags="Logo Design,Print Design"><a rel="shadowbox" href="_img/shots/2.jpg"><img src="_img/shots/2.jpg" alt="Illustration" /></a></li> 
      </ul> 
     </section> 
</div> 

Answer 1

Oui, il est possible, et à en juger par le code HTML limité, vous avez présenté, il semble que votre trop en utilisant le plugin jQuery Quicksand?

Si oui, consultez Quicksand Demo featuring Shadowbox J'ai fait un certain temps qui était basé sur ce Online Tutorial.

Même si vous n'utilisez pas Quicksand, l'idée est la même pour obtenir Shadowbox travailler comme prévu: C'est d'exécuter Shadowbox.setup(); au cours du processus de rappel de votre autre scénario. Fondamentalement, après qu'un autre script modifie le DOM et change autour d'autres éléments pour les objets Shadowbox, Shadowbox ne cache pas les nouveaux objets jusqu'à ce qu'ils soient ajoutés manuellement au cache Shadowbox via Shadowbox.setup().

Remarque: Vous devrez peut-être d'abord exécuter Shadowbox.clearCache(); afin de débusquer les liens déjà interceptés, sinon vos objets clonés commenceront à se multiplier.

De même, assurez-vous d'ouvrir le fichier .js de la démo, car il contient de nombreux commentaires que j'ai écrits, en particulier pour l'utilisation de Shadowbox.