[Andrew MParticipant]

Hi there,

Is it possible to alter the way the masonry grid loads (like when loading the portfolio index)? I quite like it that when you navigate to a portfolio index page that all the items just appear (without any of the individual fade ins)?

Perhaps this bit is too complicated but I’d also really like if when you press one of the category buttons instead of all the items changing size and moving about the screen, just for all of the current items to fade out and the selected category ones to all fade in.

I’d be super grateful for any help but understand if it’s beyond what you guys are prepared to do.

Thanks!

Andrew.

[Nabeel AModerator]

Hi Andrew,

Can you please provide us the URL of your website so we can see your current setup and suggest you the solution accordingly?

Thanks.

[Andrew MParticipant]

Sure, this is the page where I’d like to change the animation:

http://www.knoxbhavan.co.uk/projects-page/

thanks.

[RadModerator]

Hi Andrew,

Thanks for the link.

I’m not yet sure what animation you’re referring.

Masonry layour uses isotope jquery library in which we didn’t develop. We’re only limited to use available options offered by this library.

You can check this http://isotope.metafizzy.co/ and see what animation you’re trying to achieve and maybe I could help you applying that option to X’s isotope declaration.

Thanks!

[Andrew MParticipant]

Ah ok, sorry if i didn’t explain that properly.

When you click on the page (http://www.knoxbhavan.co.uk/projects-page/) each image loads one by one – I’d quite like them to load all at once (and without the fadein animation), do you think this might be possible?

The other animation I’m trying to change is when I click on one of the filters (the line at the top that says: All, Awards, Cultural & Public, Residential, Education & Workplace, Heritage) – bear with me on this one!

The best example I can find of what I’d like is on one of isotope’s example pages: http://seriouslyamazing.si.edu/
if you scroll down to the masonry grid some filters appear: (Most Recent, Art, Culture, History, Science, Most Popular)

When you click one of the filters ALL of the blocks disappear and reappear with new ones, do you think there’s a way to do that on my site?

Sorry if that’s a bit confusing, I should learn how to handle jquery better 🙁

[RadModerator]

Hi Andrew,

With your given site, they hard-linked isotope to their library settings.

SI.Isotope = function() {
    SI.Isotope.Moving = !1;
    var e = $(".grid");
    SI.NoAnimation && e.addClass("no-transition"), SI.Isotope.Init = function() {
        e.find(".q").attr("style", "").filter(".expanded").removeClass("expanded").filter(".active").removeClass("active"), e.isotope({
            animationEngine: SI.NoAnimation ? "none" : "best-available",
            transformsEnabled: SI.NoAnimation ? !1 : !0,
            itemSelector: ".q",
            resizable: !0,
            masonry: {
                gutterWidth: 0,
                columnWidth: 1
            },
            getSortData: {
                date: function(e) {
                    return parseInt(e.data("date"), 10)
                },
                popularity: function(e) {
                    return parseInt(e.data("popularity"), 10)
                }
            },
            onLayout: function() {
                var t = e.find(".q").not(".img").length,
                    n = e.find(".img").length,
                    r = (n / t).toFixed(2),
                    i = t + n;
                $("#counter").text(i + " Items (" + r + " ratio)")
            }
        }), SI.Isotope.Relayout = function(t) {
            SI.NoAnimation && e.find(".q").removeData("origPos"), e.isotope("reLayout", function() {
                SI.Isotope.Moving = !1
            })
        }, SI.NoAnimation || $(window).on("debouncedresize.isotope", function() {
            SI.Isotope.Moving = !0, SI.Isotope.Relayout("window resize")
        })
    }, SI.Isotope.Destroy = function() {
        e.isotope("destroy"), e.css("height", ""), $(window).off("debouncedresize.isotope")
    }, SI.view !== "handheld" && SI.Isotope.Init()
}

This is not gonna work just with this, so not sure if we can able to achieve that. They could be using their own animation Engine. For the meantime, you can try this.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

1. At your /themes/x-child-integrity-light/framework/views/global/ create a file with named _script-isotope-portfolio.php

2. Open you child theme’s _script-isotope-portfolio.php and paste this code replacing everything,

<?php

// =============================================================================
// VIEWS/GLOBAL/_SCRIPT-ISOTOPE-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Isotope script call for portfolio output.
// =============================================================================

$stack = x_get_stack();

?>

<script>

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

    var $container   = $('#x-iso-container');
    var $optionSets  = $('.option-set');
    var $optionLinks = $optionSets.find('a');

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

    $(window).load(function(){

      $container.isotope({
        itemSelector   : '.x-iso-container > .hentry',
        animationEngine : 'none',
        resizable      : false,
        transformsEnabled : false,
        filter         : '*',
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').hide();
      $('#x-iso-container .hentry').each(function(i){
        $(this).css({'opacity':1});
      });

    });

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

    $optionLinks.click(function(){
      var $this = $(this);
      if ( $this.hasClass('selected') ) {
        return false;
      }
      var $optionSet = $this.parents('.option-set');
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
      <?php if ( $stack == 'ethos' ) : ?>
        $('.x-portfolio-filter-label').text($this.text());
      <?php endif; ?>
      var options = {},
          key     = $optionSet.attr('data-option-key'),
          value   = $this.attr('data-option-value');
      value        = value === 'false' ? false : value;
      options[key] = value;
      if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
        changeLayoutMode( $this, options );
      } else {
        $container.isotope( options );
      }
      return false;
    });

    $('.x-portfolio-filters').click(function () {
      $(this).parent().find('ul').slideToggle(600, 'easeOutExpo');
    });

  });

</script>

3. Save and upload.

Let me know 🙂

[Andrew MParticipant]

That worked pretty nicely! Thanks so much for your help, really appreciate it!

Andrew.

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Author]

Posts