Lightbox script (view.js) doesn't work with tumblr infinite scroll

Question

I've been hacking up a theme for a tumblr portfolio ( http://hirebeamish.tumblr.com/ ) which includes adding lightbox support using view.js ( http://finegoodsmarket.com/view/ ).

I managed to get everything working so far, but when I have more than 15 items, infinite scroll kicks in, and the whole lightbox thing falls apart. I guess because the new items on the page weren't there when the page was created, the lightbox script doesn't detect them.

Does anyone know if it's possible to get this working somehow? Do I need another lightbox script?

Answer 1

OK so basically your problem is that view.js doesn't auto-update after AJAX calls, which kind of sucks.

You can force the update of view.js like this:

new View( $('.view') );

You can test this by pasting it into the console after you scrolled all the way down, and now the images will work fine.

However, you have to find the way to run it every time the DOM updates after the infinite scroll kicks in.

So let's do this in another way. Add this line of code somewhere in your theme:

$(document).on('click', 'a.imageView', function(e){
    e.preventDefault();
    $('.viewer').remove(); //This is to remove any previous viewers
    var s = $(this).attr('href');
    var v = new View ($('.imageView')); 
    v.open(); 
    v.show(s);
});

What this code does is creates a listener on the whole document, and every time there's a click it runs the function if a clicked element is anchor with a 'view' class. Then it manually creates a new view with the the array filled with all the images. It's not the best solution as it builds the array every time but should solve your problem.

Hope this helped.

UPDATE: OK so now we'll take the href attribute of the anchor so that we get the real image and not the thumbnail. It also seems that view.js is setup so that it automatically grabs 'view' class, so change the anchor classes from 'view' to 'imageView' for example. That way we won't open up two lightboxes. As well, since we are creating a new object every time when we click on an image, we need to remove all previous viewers with remove().