isotope toggle layout

[ghost]

Hi,

I try to toggle layout between horizontal and mansonry.

It seems that the container doesn't fit to the content after toggle layout.

If I resize the window browser, everything become normal. But without window browser resizing, the toggle layout don't works correctly.

Here a fiddle: http://fiddle.jshell.net/lolo34140/UeQSD/3/

I saw the documentation but I don't understand how to do it in this way...

Loic

[desandro]

Good question. This is a bit tricky. Here's an isolated example of how to change from a vertical layout mode like masonry, to a horizontal layout mode like masonryHorizontal.

http://codepen.io/desandro/pen/ivjAI

$( function() {

  var $container = $('#container');

  $container.isotope({
    masonry: {
      columnWidth: 70
    },
    masonryHorizontal: {
      rowHeight: 70
    }
  });

  var isVertical = true;

  $('#toggle').click( function() {
    isVertical = !isVertical;
    // set container size styles
    var sizeStyle = isVertical ?
      { width: '100%', height: $container.height() } :
      { height: '80%', width: $container.width() };
    // disable transition styles for a second
    $container.addClass('no-transition').css( sizeStyle );
    // trigger redraw, see http://blog.alexmaccaw.com/css-transitions
    var redraw = $container[0].offsetHeight;
    // re-enable transition and trigger different layoutMode
    $container.removeClass('no-transition')
      .isotope({
        layoutMode: isVertical ? 'masonry' : 'masonryHorizontal'
      });

  });

});

[ghost]

Thank you for your answer!

I success to toggle properly between the two layouts. However, if I click on a filter option, then I toggle layout, I observe lots of item hole inside the isotope container. Like if when a filter is activated, the isotope don't relayout completely. Is here a way to refresh filter option without clicking.

Here my webstie with the toggle layout option: http://freakyshape.com/ You need to click on next to load items in order to see what I mean. Then to click on a filter option and to toggle layout to observe the problem.

My new code:

$(document).ready(function() {

$layout=$('.container-scroll');
$container=$('#container');
$item = $('.element');

$('.toggle-view').click(function(ev){ev.preventDefault();
    $container.toggleClass('horizontal vertical');
    changeLayoutMode($container.hasClass('horizontal'));
});

function changeLayoutMode(isHorizontal){

if(isHorizontal){   
        $container.isotope('destroy');
        $container.isotope({
            itemSelector: $('.element'),
            layoutMode:'masonryHorizontal',
            masonryHorizontal: {
            columnWidth: 306,
            rowHeight: 216
            }           
            });         
        $('.prev,.next', '.controls').show();
        $('.up,.down', '.controls').hide();
        $container.isotope('reLayout', callback );
        } 

        else {  
        $container.isotope('destroy');
        $container.isotope({
            itemSelector: $('.element'),
            layoutMode: 'perfectMasonry',
            perfectMasonry: {
                columnWidth: 306,
                rowHeight: 216  
            }
            });
        $('.prev,.next', '.controls').hide();
        $('.up,.down', '.controls').show();
        $container.isotope('reLayout', callback );
                }
        }
})