1

嗨，我有一个网站有一些效果。在一个效果中，当用户遍历一个 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可以正常工作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 不起作用？

4

1 回答 1

2

在您的代码中的某个地方（您没有显示），您将首次调用 fancybox 方法。插入新的动态元素后，您必须再次调用 fancybox 方法来刷新 fancybox。

大多数插件为方法提供了一个参数，如“刷新”，其他一些插件要求您重复完整的初始方法调用。一些插件提供 .init() 方法。您必须深入研究 fancybox 的文档才能找到答案。

于 2012-10-11T09:35:37.163 回答