i use jquery isotope with view to show gallery. when i use view load more + ajax, gallery don't show new item. Because jquery isotope don't know new items when loaded ajax. Isotope have support append function. So i try edit file views_load_more.js with command

var newItems = $('.isotope .view-row:not(".isotope-item")');
wrapper.find('.view-content').isotope('addItems', newItems);

after command
wrapper.trigger('views_load_more.new_content', new_content.clone());
and it work fine for me.
I hope you can support jquery isotope in next version.
thank you.hank you.

Comments

adamgerthel’s picture

You can probably make it work by using the jquery trigger that you mentioned:

wrapper.trigger('views_load_more.new_content', new_content.clone());

I've just implemented masonry like this:

/**
 * Masonry on inspiration pages
 */
og.actions.inspirationMasonry = function () {

  // Container for masonry (the view wrapper)
  $container = $('.inspiration');

  // Apply masonry when all images in the view have loaded
  imagesLoaded($('.inspiration'), function() {
    if ($container) {
      $container.masonry({
        // options
        columnWidth: '.inspiration-picture',
        itemSelector: '.inspiration-picture',
        gutter: 0,
        transitionDuration: '0.2s'
      });
      // Add a class to each item to prevent them from being
      // processed by masonry again.
      $('.inspiration-picture').addClass('masonry-processed');
    }
  });

  // When new content has been loaded, find it and add them to masonry
  $(window).bind('views_load_more.new_content', function(){
    // Find the new items
    newItems = $container.find('.inspiration-picture:not(.masonry-processed)');
    imagesLoaded($container, function() {
      $container.masonry('appended', newItems);
    });
    // Add a class to each item to prevent them from being
    // processed by masonry again.
    newItems.each(function() {
      $(this).addClass('masonry-processed');
    });
  });
};

Without going into row-by-row, I'm basically keeping track of which items have already been added, and simply using masonry's "appended" method to add items. The imagesLoaded is another plugin (https://github.com/desandro/imagesloaded) that can be used to fire Masonry after all images have loaded.

Isotope obviously isn't identical, but the same logic applies.

dayvson009’s picture

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)
    }

você pode fazer com jquery diminui ainda mais o código

zalak.addweb’s picture

Issue tags: +views load more
avpaderno’s picture

Version: 7.x-1.2 » 7.x-1.x-dev
Category: Support request » Task
Issue tags: -Support Isotope, -, -views load more