1

Here is my Testcase. If you scroll down, the feed will automatically extend: It is an infinite scroll-feed. However, the slider images of subsequent pages are not being loaded. As soon as the page is being refreshed, all visible sliders are loaded.

In the scenario I use the following two Drupal modules:

  1. GD Infinite Scroll
  2. Zurb Orbit

How can I get sliders of subsequent pages to work properly? (Additionally: If the last page is being scrolled down, the infinite scroll would literally keep scrolling this very page infinitely. Is there a way to prevent it and just stop upon hitting the last post of the last page?)

  • Please ask your question in a way that will not render it void once you will fix your site. Link-based questions serve only you, but this site aims to serve future readers as well. Actually, because you are one and they are many, they are more important, in a way ;) – Mołot Aug 2 '15 at 15:07
  • thank you very much for your input. I think it is pretty clear from text only, what is the problem and what I would like to accomplish. Everybody who runs into the same issue will find this post via google. All the keywords are there. The testcase is just to make it more attractive to answer, since I find it hard here on stackexchange to find people actually being interested in answering questions ;) – Castor Aug 3 '15 at 23:22
  • OK, if you think so I won't argue. As you can see, I haven't downvoted or anything. Just wanted to make sure you are aware how things are meant to be here :) – Mołot Aug 4 '15 at 7:31
1

user gooddesignusa kindly showed me a solution:

scripts.js in the theme folder has to be like this (can also be created if no scripts.js is there):

(function ($, Drupal) {

  Drupal.behaviors.STARTER = {
    attach: function(context, settings) {
      // Get your Yeti started.
    }
  };

  //runs on document ready. 
    $(function(){
    //checks for autopager function and checks if ID of view is on page
    if($.autopager && $('#gelaendespiele').length){
      //binds ajaxSuccess 
      $(document).bind('ajaxSuccess.autopager',function(event, xhr, settings){
        //rerun function after ajax is done loading
        $(this).foundation('reflow');
      });
    }
  });

})(jQuery, Drupal);

Then I had to uncomment line 72 of my info file (make sure scripts.js is included)

Finally clear all caches.

| improve this answer | |
0

The reason for this behavior is simple. Module uses ready-made JS libraries. It places them in the footer to make sure they will fire after elements meant to be affected are ready. But when other module dynamically adds elements, libraries are not fired again. This is a common problem with AJAX-loaded content and Drupal does have a solution for it.

The solution would be to wrap them in behaviors, as described in Managing JavaScript in Drupal 7. Not using behaviors actually can (and in my opinion should) be considered a bug against module compatibility. Sadly, doing it is too laborious task for Q&A format.

| improve this answer | |
  • 1
    Thank you very much for your help. After some trying out I managed to load the sliders by using "jQuery(document).foundation('reflow')" in firebug consolw. I do not know, how to implement that snipped into my drupal site though. Any ideas? – Castor Aug 20 '15 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.