X theme – masonry problem

Anonymous

#101735

Hello again,

I have a follow up ajax question, regarding X theme. The solution Trevor provided on my previous question works perfectly in standard blog view. However, my site has a custom post type that uses masonry view with 3 columns, and loading results into .x-main via ajax doesn’t seem to work. It is just loading forever.

Test site with generated fake content: http://junkie.tk/videos/

Can you guys please look into this?

Kind regards,
Clay

Trevor

#101743

The previous solution did not use Masonry?

If not, then you need to add some extra javascript to the page to re-trigger the masonry, like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
    \\ your script to re-trigger masonry
  });
}(jQuery));
</script>

X Theme may be able to answer that. It might be something like:

jQuery('.x-main').Masonry(); or jQuery('.x-main').masonryReset();, or ….

Anonymous

#101751

No, it was standard blog view, I changed it to masonry today.

However I can’t seem to figure this out, I’m trying to use the code you provided in every possible way I can think of, but I always get JS error, like “is not a function” etc.

Is there any way you could look take a look at it?

Trevor

#101753

Those bits in red were only guesses. If they are wrong, they would give an error message. You need to talk to X Theme and get some support from them. If you show them this thread, that should help.

Anonymous

#101949

I found this thread: https://theme.co/apex/forums/topic/ajax-plugin-load-issues-with-themex/
Reading it makes me think they’re not very cooperative/helpful when it comes to “third party” plugins. 🙁

However I found out that masonry view in X theme makes use of an older version of Isotope: http://isotope.metafizzy.co/

This is how Isotope is called in index:

<?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

And it is handled by _script-isotope-index.php:

<?php

// =============================================================================
// VIEWS/GLOBAL/_SCRIPT-ISOTOPE-INDEX.PHP
// -----------------------------------------------------------------------------
// Isotope script call for index output.
// =============================================================================

$is_rtl = is_rtl();

?>

<script>

  jQuery(document).ready(function($) {

    <?php if ( $is_rtl ) : ?>

      $.Isotope.prototype._positionAbs = function( x, y ) {
        return { right: x, top: y };
      };

    <?php endif; ?>

    var $container = $('#x-iso-container');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).load(function() {
      $container.isotope({
        itemSelector   : '.x-iso-container > .hentry',
        resizable      : true,
        filter         : '*',
        <?php if ( $is_rtl ) : ?>
          transformsEnabled : false,
        <?php endif; ?>
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

</script>

Trevor

#101955

I will ask Ross, the developer, if he can get something useful from this.

Anonymous

#103030

Hey Trevor,

I’ve been talking to theme.co support, and they provided me with the following code:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    console.log("ajax complete");
     $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });
    $("#x-iso-container").isotope({});
  });
}(jQuery));

This code finally solved my problem. I just wanted to leave it here in case anyone else looking for a solution may find it.

Thank you guys and happy holidays!

Clay

Trevor

#103032

Thanks for coming back Clay. Great news and very informative.

[Author]

Posts