Jquery ajouter une image dynamiquement dans fancybox

Question

Salut, j'ai un site avec un effet. Dans un effet où un utilisateur va sur un div j'ajoute à ce div en position absolue une autre div. A l'intérieur du nouveau div j'insère une image et si l'utilisateur clique dessus je veux démarrer la fancybox. J'ai utilisé fancybox beaucoup de temps mais jamais avec un élément créé dynamiquement. Voici le code:

$(document).ready(function(){ 
    $(".elenco a").stop().mouseover(function(){ 
     $(".elenco a").css('color','#000'); 
     $(this).css('color','#fff'); 
     var id = $(this).attr('id'); 
     if ($('#gallery').length!=0){ 
      var image= $('#gallery').find('#thumb_img'); 
      image.attr('src','img/gallery/thumb/th_'+id+'.jpg'); 
     }else{   
      $('.elencoGallery').stop().append(function() { 

       return '<div id="gallery" style="position:absolute; top:0; left:300px; z-index:1000;overflow:hidden; width:0px; height:154px; background:#c7c2c2;"><a href="img/gallery/thumb/thumb.jpg" class="fancy"><img src="img/gallery/thumb/thumb.jpg" alt="living arredamenti" style="margin-top:9px; margin-left:19px;" id="thumb_img"/></a></div>'; 
      }); 

      $('#gallery').stop().animate({ 
       width:'200px' 

       }, 1000, function() { 
       // Animation complete. 
      }); 
     } 
    }); 

    $('.elencoGallery').stop().mouseleave(function(){ 
     $('#gallery').stop().animate({ 
      width:'0px' 
      }, 1000, function() { 
      $('#gallery').remove(); 
     }); 
    }); 

}); 
</script> 

HTML:

<div class="elencoGallery"> 
<div class="elenco" style="padding-top:18px;" > 
    <p style="padding-left:10px;" id="cucine" >test1</p> 
</div> 
<div class="elenco" style="padding-top:18px;" > 
    <p style="padding-left:10px;" id="cucine2" >test</p> 
</div> 
</div> 

Je semplified le code html, tout fonctionne très bien que fancybox ne fonctionne pas quand j'ajouter. N'est pas un problème de fancybox car si je mets un lien simple pas créé dynamiquement fancybox fonctionne bien1 Les images sont au bon endroit, si je copie ce externe de l'append à l'intérieur d'un div pas dynamique fonctionne !! Pourquoi??

<a href="img/gallery/thumb/thumb.jpg" class="fancy"><img src="img/gallery/thumb/thumb.jpg" alt="living arredamenti" style="margin-top:9px; margin-left:19px;" id="thumb_img"/></a> 

L'appel à la fancybox:

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $("a.fancy").fancybox({ 
      'transitionIn' : 'fade', 
      'transitionOut' : 'fade', 
      'speedIn'  : 600, 
      'speedOut'  : 200, 
      'overlayShow' : true, 
      'overlayOpacity': 0.8, 
      'overlayColor' : '#000' 
     }); 
    }); 
    </script> 

Pourquoi mon fancybox ne fonctionne que si je l'ai créé une exécution dans un append?

Answer 1

Quelque part dans votre code (vous n'avez pas montré), vous aurez l'appel initial à la méthode fancybox. Vous devrez actualiser la fancybox avec un autre appel à la méthode fancybox après avoir inséré de nouveaux éléments dynamiques.

La plupart des plug-ins offrent un paramètre comme «refresh» pour la méthode, d'autres plug-ins vous obligent à répéter l'appel de méthode initial complet. Certains plug-ins proposent une méthode .init(). Vous devrez creuser dans la documentation de fancybox pour le découvrir.