[instyletechParticipant]

Hey Super Friends, I’m well aware that this may be grossly out of the scope of what you can support, but you’ve provided some amazing insight in the past, so I’m trying again!

I was able to cobble together some JavaScript to determine the URL of an Isotope filter (you have to feed it the URL) and pass it through to process the filter. This allows for the portfolio to load to a certain category on click. It works, but the masonry/Isotope “tiles” disappear and then reappear after a few seconds, which I’m guessing is the transition that happens when a filter is actually processed.

My question is: how can I make it so it doesn’t disappear and then reappear? Is this even possible? I’ve set up a Child Theme and custom functions.php with the following code. I appreciate any help you can provide!

function portfolio_sort_roi() {
	if ( get_page_template_slug( get_the_ID() ) === 'template-layout-portfolio.php' ): ?>
	<script>
	  (function($) {

	    $(document).ready(function() {
        console.log('woohoo');

        var $container = $('#x-iso-container'),
            hash = window.location.hash.substr(1),
            filterItem = $('.x-portfolio-filter[data-option-value=".' + hash + '"]');

        if (filterItem.length) {
          $('.x-portfolio-filters').trigger('click');
          
          // var triggerTimeout = setTimeout(function() {
          //   // $('.option-set a[data-option-value=".' + hash + '"]').trigger('click');
          //   filterItem.trigger('click');
          //   clearTimeout(triggerTimeout);
          // }, 250);
          
          var options = {},
              key = $('.option-set').attr('data-option-key'),
              value = '.' + hash;

          value = value === 'false' ? false : value;
          options[key] = value;

          $container.trigger('smartresize');
          var triggerTimeout = setTimeout(function() {
            filterItem.trigger('click');
            $container.isotope( options );
            clearTimeout(triggerTimeout);
          }, 250);
        }

	    });
	  })(jQuery);
	</script>
	<?php endif;
}
add_action( 'wp_footer', 'portfolio_sort_roi', 100 );

[instyletechParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey there,

Regretfully, this particular customization is a bit involved. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thanks.

[Author]

Posts