kombai / freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
MIT License
1.85k stars 375 forks source link

Freewall with Easy Tabs #239

Open vancesp opened 7 years ago

vancesp commented 7 years ago

I'm wondering how I can make Freewall work with Easy Tabs flawlessly. I've tried binding the freewall function with 'easytabs:after' event and was able to call on the freewall function on my other tab but it always initiates when switching tab and it looks messy. Is there anyway to make this work flawlessly with or without animation and to make it not re-arrange everytime I switch tab?

Here's my code:

<script>
  $('#tab-container').easytabs({
    defaultTab : 'li.defaultactive',
    updateHash: false,
    animate: false
  });

$(document).ready(function() {
  $(".free-wall").each(function() {
    var wall = new freewall(this);
    wall.reset({
      selector: '.homeblock',
      fixSize: 0,
      gutterY: 10,
      gutterX: 10,
      cellH: 'auto',
      animate : true,
      delay: 1,
      onResize: function() {
        wall.fitWidth();
      }
    })
    wall.fitWidth();
  });
  $(window).trigger("resize");
});

$('#tab-container')
  .on('easytabs:after', function() {
    $(".free-wall").one(function() {
    var wall = new freewall(this);
    wall.reset({
      selector: '.homeblock',
      fixSize: 0,
      gutterY: 10,
      gutterX: 10,
      cellH: 'auto',
      animate : true,
      delay: 1,
      onResize: function() {
        wall.fitWidth();
      }
    })
    wall.fitWidth();
  });
  $(window).trigger("resize");
});