Add Infinite Scroll to Views Isotope

Hi, here there is a working implementation of infinite scroll with isotope > http://isotope.metafizzy.co/demos/infinite-scroll.html
I couldn't try it in a drupal install for now, but i goes it's possible...

hi again, i have something kind of working now, i need to do more tests but here's what i did (based on http://isotope.pixelass.com/isotope-view/infinite-scrolling, even if the demo there seems to be broken):

1- i first included an infinite scroll js (https://github.com/paulirish/infinite-scroll) via the info file
2- i then added a footer script in my isotope view (don't forget to select html text format):

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#isotope-container');
        jQuerycontainer.infinitescroll({
        navSelector  : '.pager',    // selector for the paged navigation 
        nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
        itemSelector : '.isotope-element',     // selector for all items you'll retrieve
        debug: false,
        errorCallback: function() { 
          // fade out the error message after 2 seconds
          jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
        }
        },
        // call Isotope as a callback
        function( newElements ) {
          jQuerycontainer.isotope( 'insert', jQuery( newElements )); 
          Drupal.attachBehaviors(); //important !
        }
      );

});
</script>

where #isotope container is... my isotope container div ;-)
and .isotope-element is my class for isotope items

3- set a pager in the view (Paged output, mini pager for example) and set your number of item per pages...
4- edit your jquery.infinitescroll.min.js to set a correct path for your loading gif

that should work !

now i've only have one problem, my contextual links (integrated as fields in my view) are only appearing for the firsts isotope items, not for the ones loaded after scrolling. As these links are present in the output code i guess that it is a simple issue. I tried to force my contextual-links-wrapper div z-index, but it does not work... any idea ? thanks...

@jmix great tutoria!!!

I followed the steps above in my view .. but when scrolling down the page, the plugin loads only 2 elements more... even if there is other elements in the query of the pager... never append to you?

Thanks for sharing!

hi ! i guess your pager value is set to 2, so you have to edit your view and set a higher number !

Thank you for sharing this. It will be good to integrate the infinite scroll function to this module. It will be a nice extra feature. I integrated now for my portfolio page (in build) http://www.neofelis.de/referenzen the isotope views module. It works really fine.

Hi - thanks for posting your code - it has helped me out tremendously.

Adding your JS to the footer of my view through the views UI didn't work for me - I did adjust the input format. The infinite scroll ajax load of the second set of results was triggering in the live preview region of the Views interface but only BEFORE saving the view. After saving the view it no longer fired.

I ended up adapting your code and MetaFizzy's original embed code from http://isotope.metafizzy.co/demos/infinite-scroll.html and then adding it to the Views Isotope module's isotope initialization code in the 'views_isotope.js' file.

This is working fine but only if I start on the second page of the View with the query string '?page=1' appended to the URL. I'm working with this on my local machine. Without the '/n?page=1', after infinitescroll loads the first set of results it attempts to increment the first digital following 'localhost' which happens to be the first '2' in '2012' rather than the page number at the end of the URL.

In the net panel of my browser developer consoles I see infinitescroll trying to GET a path beginning with '3012-06-15...' and so on.

Any ideas on how to get infinite scroll to target the last number in the URL rather than the first?

@fabioloool this may solve your problem too - I was seeing basically the same thing.

To fix this problem I used the 'pathParse' option while defining infinitescroll in 'views_isotope.js' rather than in the View footer. I haven't found any complete documentation on this option but there's a github issue for infinitescroll that walks through it here:

https://github.com/paulirish/infinite-scroll/issues/5

And this answer at stackoverflow includes an example implementation:

http://stackoverflow.com/questions/11397648/infinite-scroll-pathparse-fo...

The pathParse option expects a function - I defined mine like so and resolved the problem I was seeing:

pathParse: function(path,nextPage){
        path = ['?page=',''];
        return path;
},

From what I'm seeing the first argument should be the string that appears before the number to be incremented and the second argument should be what appears after the number to be incremented.

infinitescroll does contain some code out of the box to parse drupal paths but it wasn't working correctly for me.

@OxH2, thanx!

It works... my grid now is perfect but... I have found a bug in Views PHP Module... if i put a custom PHP field in my view the infinite scroll don't stop at the last page ... but it continue loading the last items of the pager again and again ...
It looks like a Views PHP bug.... is not necessary but... very useful sometimes.. so I'm going to find a solution.

Has anyone tried using Isotopes with the Views Infinite Scroll module?

http://drupal.org/project/views_infinite_scroll

@chrylarson I think that it's possible to use with http://drupal.org/project/views_infinite_scroll, but the jviews_plugin_pager_infinite_scroll.inc needs a case added for each views style. On the Views Infinite Scroll issue queue http://drupal.org/node/970870#comment-5941792 there is some code for a similar issue with views_fluidgrid.

case 'views_fluidgrid':
        $content_selector = 'div.view-content > div.views-fluidgrid-wrapper';
        $items_selector = '.views-fluidgrid-item';
        break;

I found that by the error I was getting - on content.offset() - was for the same reason. I'd expect that you could add the case for views_isotope. If you do and are successful, please post what you did back here!

Some progress...

In the file views_plugin_pager_infinite_scroll.inc I did the following

// Already exists:
case 'table':
        $content_selector = 'div.view-content > table > tbody';
        $items_selector = 'tr';
        break;
//Added
case 'isotope':
        $content_selector = 'div.view-content > #isotope-container';
        $items_selector = '.isotope-element';
break;

I found that case 'isotope' was correct via debugging, and it does trigger the infinite scroll now.

The issue I have now is that the content is overlapping / underlapping original content. I'm thinking I will have to call $(content_selector).isotope('reLayout'); somewhere near line 44 in views_infinite_scroll.js after this:

load: function() {
$('div#views_infinite_scroll-ajax-loader').remove();
 Drupal.attachBehaviors(this);

(before the load: function() { } close... so: directly after Drupal.attachBehaviors. Caveat: I have images, so I had to use the imagesLoaded plugin to make the isotope layout work in the first place. Going to try to use it in this spot. Anybody else have luck?

YESSSS!!!! Got views_isotope working with views_infinite_scroll!!!

I was close on my above comment, but had to look at the http://isotope.metafizzy.co/demos/infinite-scroll.html to complete. It turns out that the overlapping issue people notice is because after the new items are fetched, they haven't been added to the set of isotope elements. By inspecting elements I was able to find that the new items did have .isotope-element class, but not .isotope-item.

I had to find all of those elements and applied the method 'appended' to them, NOT 'reLayout'. Note that because I have images loaded, I'm invoking the imagesLoaded function callback, but you don't have to w/o images in your views. And imagesLoades is a different plugin library that I had to include (I added JS folder to views_isotope and added the js in the .info file, though anyway you can have it loaded will have same result.

load: function( 
  $('div#views_infinite_scroll-ajax-loader').remove();
  Drupal.attachBehaviors(this);
  $new_elements = $(".isotope-element:not(.isotope-item)");
  $(content_selector).imagesLoaded(function(){
   	$(content_selector).isotope('appended', $new_elements);
  });
               
}

To recap: See above comment for code in views_plugin_pager_infinite_scroll.inc. Do that, and this, and you should be a happy camper :)

Immense, immense thanks for your code work on this stevenmhouse, it is extremely helpful. This module plus the upgrades in this and the preselected-value thread pretty much solve the "replicate Pinterest with Drupal/Views" problem independent of theme, which is awesome.

This solution seems to work well for the initial, unfiltered result.

But, what if the isotope_filter_block is enabled. Clicking on a filter renders a full unfiltered additional page. Is it possible for the infinite pager result to load onto the page filtered as well? Perhaps the behavior of the filtering can be executed again after the page renders?

As I find more time to look over this change, it would be great to have a patch (for this module and infinite scroll). I may have some time late next week to help.

Good work on this issue

I've applied a @stevenmhouse inspired patch which in fact probably ought to be moved to the views_infinite_scroll module.

This patch checks the availability of the isotope js library before calling isotope(). Also it wraps the imagesloaded library in a check for this too will a safe fallback if not.

It worked for me to get jQuery Isotope working with views_infinite_scroll. Please test for yourself.

Should we move this to the views_infinite_scroll issue queue as this patch provides integration from that perspective rather than the jQuery Isotope module? Thoughts?

Of course, an alternative to #16 would be to provide a jQuery "hook" in the load routine in views_infinite_scroll.js instead of the code detailed in the #16 patch.

// Allow other modules to hook into the loaded event
$('.view-content.isotope').trigger('infiniteScroll.loaded', self);

That way other modules can use this trigger as the basis of their own implementation- such as:

$('.view-content.isotope').once('sorterUpdate', function () {
  $('.view-content.isotope').bind('infiniteScroll.loaded', function() {
    // My module execution- such as isotope appended method etc.
  });
});

Just a thought- this might be a more polite and Drupalish way of scaling this requirement to be multi-purpose separating out the hook and implementation concerns.

I was able to find that the new items did have .isotope-element class, but not .isotope-item...I had to find all of those elements and applied the method 'appended' to them

Stevenmhouse, could you please share exactly how you "found all of those elements and applied the method 'appended' to them"? I've been at this for days. :(

This is exactly the problem I'm having - underlapping. The first page loads fine. But in all subsequent pages, the elements are missing the ".isotope-item" item class, and also there is no style attribute setting like there is in the elements from the first page. I tried brute forcing that info into the template. No luck.

Thanks.

Anybody? Please help. https://drupal.org/node/1643486#comment-7595589

In case I didn't clarify it before, I did run the patch. The infinite scroll is triggering and the new data is there. But it's completely behind the old data. If there's something else I can add to this question to help clarify, please let me know.

Hello,
it's actually for 7.x.2.x-dev, but i think it should work and i hope You still reading this.

The selector seems to be wrong, just change in views_infinite_scroll.js
var container = '.view-content.isotope';
to
var container = 'div.view-content > #isotope-container';

and You should be happy :)

I rerolled the patch against the latest version of the views_infinite_scroll module. Maybe we should incorporate the patch in the issues there also.

Please review an provide feedback. Finally i got it working combining #12, #16 and #22.

SteffenR

I'm getting similar behavior to #18. Initial page loads OK; however, when I scroll down:

1. New items load but are on top of old items at the top of the list. This seems to be happening because style attributes such as style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(640px, 542px, 0px); are not being added to the new items.
2. The class ".isotope-item" is there.

Applied the patch to the latest release version (7.x-1.1) of Views Infinite Scroll module as well as dev version.

HTH

I've been looking at this patches as well as a few other changes to the 2.x branch like CSS changes suggested in #1861614: Provide only CSS that are required for module's function. Since the usage of the dev snapshot 2.x branch makes up about 1/4 of this modules usage, I'm going to roll a 2.x alpha and start making some relatively large changes to that branch. It might get worse before it gets better, but I'm hoping to get Infinite Scroll working "out of the box" in the 2.x branch.

I implemented the patch from #23 with latest 7.x-1.1 dev release and it works well with the unfiltered isotope view.

However, as jefftrnr in #15 comments, using a filter grid with views isotope shows all items regardless of the filter.

Has anyone managed to resolve this issue?

Hi guys

I am using Views Infinite Scroll 7.x-1.1 and Views Isotope 7.x-1.0-beta2. Which of the patches above should i implement ?

anyone? no?

I had integrated it at my web site of Funny Videos. Have a look at http://yofunnyvideos.com

hi, how I get multiple filters in Isotope module!?
please, help me

Using Views Infinite scroll v7.x-1.1 and Views Isotope v7.x-2.0-alpha1 .

Included #23 patch and mostly it is working except the loading for more items is only loading on the ALL filter, but not the other filters. Is there a way to load more from the other filters too?

Besides that, great job in getting this to work because I tried using Views Load More with Isotope and it doesn't load things automatically.

hi, i've used patch from #23 but i get white empty "spaces" beetween some parts of loaded images.
In my case solution was to chanege:
$(container).isotope('appended', $new_elements);
with:
$(container).isotope('insert', $new_elements);
I've used: Views Infinite Scroll v7.x-1.1, Views Isotope v7.x-2.0-alpha1

and this solution work only with jQuery update: with jQuery version less than 1.9

Thanks to sponsorship from [@bodigiti] I have just committed code to the dev branch which should provide automatic integration with views_infinite_scroll module as soon as #2633928: Allow modules to specify their own selectors clears.

Currently looking for testers! Please apply the patch from that ticket to the views_infinite_scroll module, then update views_isotope to the latest dev branch, and let me know if it all works!

Tried the latest dev and applied the patch to Views Infinite Scroll but I can't get passed the jquery errors stating urlFilters are undefined. I tried uninstalling views isotope and re-installing but I still get the errors. I think there is some conflict with the commit to support url filters.

Fixed in 7.x-2.0-beta3. Please start a new issue if you have any issues with the implementation. Note that you will still need the patch from #35 until that ticket clears.