JQuery динамически добавить изображение в fancybox

Question

Привет У меня есть сайт с некоторым эффектом. В одном из эффектов, когда пользователь перебирает div, я добавляю к этому div в позиции абсолютный другой div. Внутри нового div я вставляю изображение, и если пользователь нажимает на него, я хочу запустить fancybox. Я использовал fancybox много времени, но никогда с элементом, созданным динамически. это код:

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

Я упрощенный HTML-, все работает отлично только FancyBox не работает, когда я прилагаю. Не проблема fancybox, потому что, если я помещаю простую ссылку, не созданная динамически fancybox работает fine1 Изображение находится в правильном месте. Если я копирую этот внешний из добавленного внутри div, то не динамически работает !! Зачем??

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

Вызов к 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> 

Почему мой FancyBox не работает, когда я создал его среды выполнения в качестве Append?

Answer 1

Где-то в вашем коде (вы не показывали) у вас будет начальный вызов метода fancybox. Вам нужно будет обновить fancybox другим вызовом метода fancybox после того, как вы вставите новые динамические элементы.

Большинство плагинов предлагают такой параметр, как «обновление» для этого метода, некоторые другие плагины требуют повторения полного вызова метода. Некоторые плагины предлагают метод .init(). Вам нужно будет вникнуть в документацию fancybox, чтобы узнать.