Working on all tabs

[jppag]

Hi Kombai,

I have a page that I use bootstrap tabs.js to toggle through different clients. Each client has an image gallery. The freewall.js works perfect for the first tab (resizes the images and position them according to the empty spaces). But when I click the tab links to see the other clients, the plugin responds but the images don't resize to fit the width and break the whole layout. I am using rails, and the clients and images, for the image gallery, are editable, so I cannot set an specific id for each. Could you help me?

[kombai]

Hello, Could you provide static html file please.

[petrbela]

It seems you don't trigger the rearrange after you switch tabs. If you only run freewall.fitWidth() on the initial page load, it won't arrange the content on the hidden tabs because javascript cannot calculate the sizes of not rendered items.

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');

  // here you need to rearrange the wall
  setTimeout(function() {
    freewall('#myTab .wall').fitWidth();
  }, 0);
});

The setTimeout may not be needed, but it usually gives browser time to render the tab (and the wall), and then let freewall do the calculations in the next cycle.