NivoLightbox and Infinite Scroll

[martinb07]

Hi I want to use the NivoLightbox with Paul Irish Infinite Scroll. After new content is loaded, the lightbox is not working on the new items. It look like the lightbox does not know that there are new elements and should be initialized again. On this page (-> http://www.infinite-scroll.com/lightbox-compatibility-code/) I found some code for other lightboxes. What do I have to do for the NivoLightbox to work with the inifinite scroll plugin?

Thanks Regards Martin

[macsupport]

You need to use the callback function within infinite scroll

 function( newElements ) {
$('a').nivoLightbox();
}

[scottwvw]

Hi,

I'm having the same issue, I've added the code as you said but now getting "The requested content cannot be loaded. Please try again later."

Page is here if it helps: http://chazrobdir.tumblr.com/

Thanks!

[macsupport]

In your page 2, your infinitescroll itemSelector : '.post' only loads items with the class post (li class="post video") into your page and your div class="vidoverlay" is not within the '.post li' selector so it doesn't get loaded.

<li class="post video" style="background-image:url(https://i.vimeocdn.com/video/449660101_1280.jpg);"><a href="#1399538409" ><div class="innerpost"><div class="caption"><p>CHASE &amp; STATUS  &#8221;COUNT ON ME ft MOKO&#8221;</p></div></div></a></li>
<div class="vidoverlay" id="1399538409"><div class="caption"><p>CHASE &amp; STATUS  &#8221;COUNT ON ME ft MOKO&#8221;</p></div> <div class="videowrapper"><iframe src="http://player.vimeo.com/video/75161352" width="700" height="393" frameborder="0"></iframe></div></div>                              

should be

<li class="post video" style="background-image:url(https://i.vimeocdn.com/video/449660101_1280.jpg);"><a href="#1399538409" ><div class="innerpost"><div class="caption"><p>CHASE &amp; STATUS  &#8221;COUNT ON ME ft MOKO&#8221;</p></div></div></a>
<div class="vidoverlay" id="1399538409"><div class="caption"><p>CHASE &amp; STATUS  &#8221;COUNT ON ME ft MOKO&#8221;</p></div> <div class="videowrapper"><iframe src="http://player.vimeo.com/video/75161352" width="700" height="393" frameborder="0"></iframe></div></div></li>

also, you need to fix some code. $(.post) needs to be $(".post") as below

jQuery(document).ready(function($) {
            $(".post").css( "background-size", "cover" );
            $(".innerpost").css( "background-size", "cover" );
            });              

[scottwvw]

sorted! thanks for your help

[ailedgarcia]

I'm getting the same error when clicking on my student examples lightbox imagesbut its only not working on mobile device (works fine on desktop computers on all current browsers). Web address is: http://www.ailedgarcia.com/112/#studentwork Any and all help is appreciated :)