Evénement de déclenchement avec des éléments d'ancrage nouvellement créés

J'utilise le plugin fancybox lightbox dans jquery. Il accroche dans les balises d'ancrage de telle sorte que ce qui suit tire une image qui est enchaînée avec les autres images référencées avec rel = « example_group »:Evénement de déclenchement avec des éléments d'ancrage nouvellement créés

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a[rel=example_group]").fancybox(); 
    }); 
</script> 

<body> 
    <a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a> 
    <a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a> 
</body>

Je voudrais ajouter des images supplémentaires à la galerie de pop-up, mais Je ne veux pas les inclure sur la page avant qu'un lien ne soit touché. Donc maintenant, deux images sont affichées et sont ensuite liées. Je voudrais, par exemple, accrocher une troisième image sans l'afficher explicitement dans le corps.

J'ai essayé ce qui suit:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a[rel=example_group]").fancybox(); 

     $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>").appendTo("body"); 
    }); 
</script>

Ce accrochera une troisième image dans la galerie, mais affiche également l'image dans le corps. semble

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a[rel=example_group]").fancybox(); 

     $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>"); 
    }); 
</script>

Mais cet élément ajouté ne pas associer au groupe rel, et seulement deux images sont enchaînées ensemble: j'ai donc essayé la même chose avec la partie appendTo.

Comment puis-je ajouter un nouvel élément d'ancrage et le raccorder à l'appel .fancybox sans avoir à ajouter la référence au corps? Je suppose que cette question est assez indépendante du code fancybox spécifique. Cela semble juste une question d'expertise suffisante.

Source

2010-10-13 Ed.

Je ne sais pas vraiment beaucoup de choses sur .fancybox(), mais voici une idée que vous pourriez essayer.

Placez les images que vous ne souhaitez pas afficher sur la page dans un conteneur caché. Ils ne seront pas visibles sur la page, mais j'imagine qu'ils seraient dans le fancybox.

HTML

<body> 
    <div id='hiddenContainer' style='display:none;'></div> 

    <a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a> 
    <a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a> 
</body>

En jQuery, ajoutez l'image à ce conteneur.

$(document).ready(function() { 
    $("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>") 
      .appendTo("#hiddenContainer"); 
    $("a[rel=example_group]").fancybox(); 
});

Source

2010-10-13 16:13:51 user113716

Evénement de déclenchement avec des éléments d'ancrage nouvellement créés

Répondre

Questions connexes