Re-firing parallax.js when using Ajax Load More

Question

I am trying to incorporate Parallax.js (jQuery) and Ajax Load More (WordPress plugin) to the same page. When Load More changes the length of the page, the parallax images should re-position themselves with everythig else, but they don't, so I am left with empty spaces where the images should be.

The problem can be seen here – scroll down to 'Past Events'.

I realise that Parallax needs to be re-triggered when the page is re-sized (as per this thread) but I have not managed so far to write the code that will make this happen. Part of the issue may be that I'm using the Ajax Load More WordPress plugin and so don't have the same kind of access to the code as for the Parallax effect (I don't want to edit the plugin files themselves).

I am loading the scripts in the theme files as follows:

<script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery.parallax.min.js"></script>

and calling the images as follows:

<div class="parallax-img" data-parallax="scroll" data-src="<?php the_field('page_break_1'); ?>" data-bleed="50" data-midnight="mh-clear"></div>

The repeater for the Load More function is simple php which I can share if it is helpful but which seems irrelevant to this function – I'm not sure what the plugin is doing code-wise beyond that.

I am hoping for the absolute positioned elements (parallax scrolling images) to have their positions re-plotted when the page is made longer. How can I write the function that will make this happen please?

Darren Cooney · Accepted Answer · 2019-08-29 13:36:27Z

0

Ajax Load More has callbacks functions that are dispatched after certain events that you can use for this purpose.

For this case, check out the almComplete callback. https://connekthq.com/plugins/ajax-load-more/docs/callback-functions/almcomplete/

answered Aug 29, 2019 at 13:36

Darren Cooney

1,0702 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mtm Over a year ago

Thanks @Darren. It's not clear to me how to implement this though – I've tried adding window.almComplete = function(alm){ $(window).trigger('resize').trigger('scroll'); }; and window.almComplete = function(alm){ jQuery(window).trigger('resize').trigger('scroll'); }; but i'm not seeing any change. How should I be implementing this?

Darren Cooney Over a year ago

You would implement inside a custom JS file or on the page itself. I suggest testing the function is being hit with a console.log

mtm Over a year ago

in the page itself (footer) is where i've done this. the console.log is appearing as expected but still not seeing that picture move? here's what i'm running – maybe you can see where i'm going wrong?:

<script> window.almComplete = function(alm){ jQuery(window).trigger('resize').trigger('scroll'); console.log('#almComplete should have fired'); };	 </script>

Collectives™ on Stack Overflow

Re-firing parallax.js when using Ajax Load More

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related