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 画像は正しい場所にあります。どうして？？

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

ファンシーボックスへの呼び出し:

<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 を更新する必要があります。

ほとんどのプラグインは、メソッドに対して「refresh」などのパラメーターを提供しますが、他の一部のプラグインでは、完全な初期メソッド呼び出しを繰り返す必要があります。一部のプラグインは .init() メソッドを提供します。調べるには、fancybox のドキュメントを掘り下げる必要があります。

于 2012-10-11T09:35:37.163 に答える