Hi, I'd like to limit the number of isotope-elements on first load and to have a 'load more' button to show the hidden ones.

Since 'Views Load More' module doesn't seem to work with Views Isotope, I decided to write simple jQuery for this need. So I started by hiding some of the isotope-elements with .hide() and I also tried transform : scale(0) but the #isotope-container height isn't adjusted accordingly.

Could anyone share some solutions they can think of as to how can the height be adjusted accordingly, please? Thank you!

PS: I prefer to have load more button than Infinite Scrolling - also cause the implementation for infinite scrolling with isotope on Drupal seems to be quite complex for a Drupal and jQuery newbie like me.

Comments

jmix’s picture

jmix commented

Hi, i'm very interested in this too, i couldn't find any solution to have a "load more" button to work on my isotope view...
Have you found a solution for this ?

curios’s picture

curios commented

Yes and no.

Yes: I ended up putting an extra class as an identifier for which items need to be shown on page load and hide the remaining item without that extra class. 

$('#container').isotope({ filter: '.showthis' });

The "Load more" button will then just reset the filter to show all items.

$('#container').isotope({ filter: '*' });

No: Manual process. Wish there's an existing smart and better function for this.

jmix’s picture

jmix commented

ok ! thank you for answering.
i just found another solution, don't know if it can be useful for you (it's not a load more but an infinite scroll solution):
http://drupal.org/node/1643486#comment-6203206

dayvson009’s picture

dayvson009 commented
Issue summary: View changes

Eu consegui.
alterei o codigo do arquivo views_load_more.js
linha :85

if (effect.showEffect != 'show') {
      wrapper.find(content_query).children(':not(:visible)')[effect.showEffect](effect.showSpeed);
}

para

 if (effect.showEffect != 'show') {
      wrapper.find(content_query).children(':not(:visible)')[effect.showEffect](effect.showSpeed);
      setTimeout(function(){
        
        $container = $('#isotope-container');
    
        $container.isotope('destroy');

        cont = document.querySelectorAll('.filho');

        cont[0].innerHTML += cont[cont.length-1].innerHTML;

        cont[cont.length-1].remove();


        $container.isotope({
          itemSelector: '.isotope-element'
        });

      },200)
    }
Chris Gillis’s picture

Chris Gillis commented
Version: 7.x-1.0-beta2 » 7.x-2.x-dev
Status: Active » Postponed (maintainer needs more info)

Try the latest version with $('.isotope-container').isotope('layout'); in your callback and let me know if that works.

Chris Gillis’s picture

Chris Gillis commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

No response from OP.