0

サイトで Infinite Scroll と Fancybox を同時に使用すると問題が発生します。最初にロードされた画像ですべてが正常に機能します..新しいコンテンツが無限スクロールを介してプルされるとすぐに、新しい画像はFancyboxで開かれなくなります...これまでのところ、元のFancybox呼び出しは「見た」ことはありません新しい要素。

したがって、Fancybox を Infinite Scroll コールバックに通す必要があります。または、少なくともこれは、こことGoogleを読んだ後に思いついたものです.

ただし、コードは新しく読み込まれた画像に Fancybox を適用するようになりましたが、Fancybox オーバーレイにはエラーが表示されます: 要求されたコンテンツを読み込めません。後でもう一度やり直してください。

問題が何であるかを理解できないようです。大歓迎です!!

www.deborre.net#ポートフォリオ

そうそう、私もアイソトープを使用しており、すべてがWordpressで実行されていることにも言及する必要があります. 私もこれを見つけました：Infinite-Scrollと一緒にEasyFancybox Wordpress Pluginを使用していますが、まだ正しく機能させることができていません...

私がこれまでに思いついたこと：

        // ISOTOPE
    $(window).load(function(){
        var $container = $('#portfolio-centre-wrap')
        // initialize Isotope
        $container.isotope({
          // options...
          resizable: false, // disable normal resizing
          // set columnWidth to a percentage of container width
            itemSelector : '.portfolio-item',
          masonry: { columnWidth: $container.width() / 3 }
        });
        $container.infinitescroll({
            navSelector  : '#pagination',    // selector for the paged navigation 
            nextSelector : '#pagination .next a',  // selector for the NEXT link (to page 2)
            itemSelector : '.portfolio-item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'Sorry, that is it for now...',
                img: 'http://dev.deborre.net/wp-content/themes/deborre2012v2/_img/loading.gif',
                msgText: ''
              }
            },
            // call Isotope as a callback
            function(newElements) {
              var $newElems = $(newElements);
              $newElems.imagesLoaded(function(){
                $container.isotope('appended', $newElems );
                //fancybox
                var thumbnails = jQuery("a:has(img)").not(".nolightbox").filter( function() { return /\.(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
                thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
                $(newElements).fancybox({
                        'cyclic': true,
                        'autoScale': true,
                        'padding': 10,
                        'opacity': true,
                        'speedIn': 500,
                        'speedOut': 500,
                        'changeSpeed': 300,
                        'overlayShow': true,
                        'overlayOpacity': "0.8",
                        'overlayColor': "#585858",
                        'titleShow': false,
                        'titlePosition': 'inside',
                        'enableEscapeButton': true,
                        'showCloseButton': true,
                        'showNavArrows': true,
                        'hideOnOverlayClick': true,
                        'hideOnContentClick': true,
                        'width': 560,
                        'height': 340,
                        'transitionIn': "fade",
                        'transitionOut': "fade",
                        'centerOnScroll': true
                 });    
              });
            }      
        );

//答え：

変化しているようです：

$(newElements).fancybox({

に：

$(.fancybox).fancybox({

私のために問題を解決しました。

4

1 に答える 1

0

fancybox v1.3.4を使用していて、そのバージョンは動的に追加された要素をサポートしていません（Infinite Scrollはそれらの要素を動的にDOMに追加します）...したがって、回避策についてはhttps://stackoverflow.com/a/9084293/1055987を確認してください。

于 2012-10-12T19:03:23.687 に答える