0

I have three pages in my portfolio website built on the Masonry plugin (http://www. 4pixels.co.uk/). On the first page fancybox works perfectly for a few of the images.

But when I use infiniteScroll to load page 2 at the bottom of the first page, the fancy box links stop working and just load the thick box image into a new page.

If I load page 2 (http://www.4pixels.co.uk/index2.html) directly into the browser it worked fine (with all the css/js). I've since stripped out the js and css from this page as it loads them from page 1, but it makes no difference and fancy box still doesn't work (The image to try it with is the Responsive screens for Winston Ellis website)

All the best Andy

I have tried

    $(document).ready(function() {
    $("#tumblelog").on("focusin", function(){
    $("a.example2").fancybox({
    'overlayShow'   : true,
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic'
     });
     });
     });

but still not working. I see your example is working so I'll have to pull it apart as I can't see were I'm going wrong..

jjnguy
  • 136,852
  • 53
  • 295
  • 323
Andy Nightingale
  • 149
  • 2
  • 4
  • 16

1 Answers1

0

Fancybox v1.3.4 cannot be bound to dynamically added elements (like those added by infiniteScroll).

If you want to have fancybox bound to those new elements, you have two options:

1: upgrade to fancybox v2.x ... or

2: keep using fancybox v1.3.4 but change your script and use jQuery on(). follow this link to learn how to

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306