2012-10-11 55 views
1

嗨,我有一個網站有一些效果。 在一個效果是,當一個用戶超過一個div我附加到該位置絕對另一個div的div。在新的div裏面插入圖片,如果用戶點擊它,我想啓動fancybox。 我已經使用fancybox很多時間,但從來沒有動態創建一個元素。 這是代碼:jquery在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> 

我已經semplified的HTML,一切工作正常只有當的fancybox我追加不起作用。 是不是fancybox的問題,因爲如果我把一個簡單的鏈接不動態創建fancybox工作正常1 圖像是在正確的地方,如果我複製這個外部的附加內部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不工作?

+0

Ciao。非節奏di provare il tuo codice,ma quell'id ripetuto(cucine)potrebbe敢問題。 –

+0

沒有問題的ID我只複製並粘貼代碼,問題是另一個 –

回答

2

你的代碼中的某個地方(你沒有顯示)你將有最初的調用fancybox方法。在插入新的動態元素後,您必須通過另一次調用fancybox方法來刷新fancybox。

大多數插件都爲方法提供了一個類似'刷新'的參數,其他一些插件要求您重複完整的初始方法調用。一些插件提供了一個.init()方法。你將不得不深入fancybox的文檔來找出答案。

+0

我已經添加到fancybox的調用,好吧我不喜歡這個問題,我試着刷新fancybox,但我不知道該怎麼做,我嘗試 –

+0

首先,我會嘗試在插入新元素後再次執行相同的命令。只需將調用放入函數中,並在$(document).ready()和元素插入上調用它。 – devnull69

+0

感謝它與您的幫助一起工作! –