Infinite Scroll Callback for Fancybox

Question

I have a problem on my site with using Infinite Scroll and Fancybox at the same time. Everything works fine on the initially loaded images .. then as soon as new content is pulled via Infinite scroll, the new images don't open with Fancybox anymore... So far it makes sense, the original Fancybox call never "saw" the new elements.

So I need to put Fancybox through the Infinite Scroll callback. Or at least this is what I have come up after reading on here and Google.

However, my code does now apply Fancybox to the newly loaded images, but the Fancybox Overlay shows Error: The requested content cannot be loaded. Please try again later.

Can't seem to figure out what the problem is, help much appreciated!!

www.deborre.net#portfolio

Oh yes I should also mention I am also using isotope and everything runs on Wordpress. I also found this: Using EasyFancybox Wordpress Plugin alongside Infinite-Scroll but have not yet managed to get it to work for me correctly...

What I have come up with so far:

        // 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
                 });    
              });
            }      
        );

//ANSWER:

It seems changing:

$(newElements).fancybox({

to:

$(.fancybox).fancybox({

solved the issue for me.

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

You are using fancybox v1.3.4 and that version doesn't support dynamically added elements (Infinite Scroll adds those elements dynamically to the DOM) ... so check https://stackoverflow.com/a/9084293/1055987 for a workaround.

edited May 23 '17 at 12:27

Community

1
1

answered Oct 12 '12 at 19:03

JFK

40,963
31
133
306

Thanks for the answer, I didn't check the link properly, because I have literally just found a solution. – deborre Oct 12 '12 at 19:10
I am just reading through your link, do you see any downside to the solution I have found? – deborre Oct 12 '12 at 19:14
@deborrre : in your solution you are actually manually re-init fancybox every time you add new elements ... in a way it does the same like mine where jQuery `.on` does the job. I would choose my solution in terms of performance. – JFK Oct 12 '12 at 19:22

Infinite Scroll Callback for Fancybox

1 Answers1