Canvas Support

Infinite scroll and ajax in modal

3 replies · opened Oct 3, 2016

DdaihloOct 3, 2016

I'm using the portfolio grid with ajax in modal, it's all good.
I have added infinite scroll, and the HTML content of the page loads fine (image, title, overlay), but the newly loaded portfolio items lose their ajaxy-modal behaviour and just go to a new page when clicked.

I notice there is a callback function option with infinite scroll - what would I need to put into the callback function to cause the portfolio links to also load the page content in a modal loaded with ajax?
For testing, I am just pointing the ajax loading page to itself.

I don't have the site online to view yet, can you help me without that?

Thanks :)

SSemicolon WebSTAFFOct 3, 2016

Hello,

This can be easily fixed! Simply add the following code in the Infinite Scroll callback Function: 

SEMICOLON.initialize.lightbox();

Your code will look something like this: 

function( newElements ) {
	$container.isotope( 'appended', $( newElements ) );
	var t = setTimeout( function(){ $container.isotope('layout'); }, 2000 );
	SEMICOLON.widget.loadFlexSlider();
	SEMICOLON.portfolio.arrange();
	SEMICOLON.initialize.lightbox();
});

This will definitely fix the issue. Let us know if we can help you with anything else or if you find any further issues.

DdaihloOct 3, 2016

Wonderful!
I knew you would already have a solution for this.
Great template, great service!
Thanks :)

SSemicolon WebSTAFFOct 5, 2016

Hello,

Thank You so much for the Kind Words! :)

Really Glad that your issue was resolved and we are very happy to help! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard