Broken layout with isotope plugin

Question

This is my example code:

When i click to an any filter links the layout is broken.

I use isotope plugin and this is my jquery code.

JSS markup:

$(function(){
$('.fancygallery-panel').wrapAll('<div id="isotopeCont" />');


$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#isotopeCont').isotope({ 
  filter: selector ,
  animationEngine:'best-available'
  });

  return false;
});

})

CSS markup:

/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}


.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Answer 1

$(document).ready(function(){
$('.fancygallery-panel').wrapAll('<div id="isotopeCont" />');


$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#isotopeCont').isotope({ 
  filter: selector ,
  animationEngine:'best-available'
  });

  return false;
});

})

I'm no jQuery expert, but don't you need the document ready in there? I set up isotope differently using classes on the list items and also an active state. This is my code.

HTML for the filter

<div id="filter">
            <ul>
                <li><a href="" title="*">All</a></li>
                <li><a href="" title="test1">1</a></li>
                <li><a href="" title="test2">2</a></li>
                <li><a href="" title="test3">3</a></li>
                <li><a href="" title="test4">4</a></li>
                <li><a href="" title="test5">5</a></li>
                <li><a href="" title="test6">6</a></li>
            </ul>
        </div>

Gallery of list items

<ul class="gallery simple" data-current="">
<li class="test5">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test6">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test5">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test3">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test1">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>
<li class="test2">
<a href="largerimage.jpg" class="button-thumbs" data-fancybox-group="gallery"  title=""><span class="hover"></span><img src="image.jpg"/></a>
</li>

JQuery

<script src="PATHTOYOURJSDIR/jquery.isotope.min.js"></script>

        <script type="text/javascript">

        $(document).ready(function(){
        var $container = $('ul.gallery');
    var toFilter = '*';

    $container.isotope({
        filter: toFilter,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $container.attr('data-current',toFilter);

    checkActive();

    $('#filter a').click(function(){
        var title = $(this).attr('title');
        var text = $(this).text();
        if(text == "All"){
            var selector = title;
        }
        else {
            var selector = "." + title;
        }

        $container.attr('data-current',selector);

        $container.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        checkActive();

        return false;
    });

    function checkActive(){

    $('#filter a').each(function(){

        $(this).removeClass("current");

        var title = $(this).attr('title');

        title = '.'+title;

        if(title=='.*'){
            title = '*';
        }


        var currentCat = $container.attr('data-current');

        if(title==currentCat){
            $(this).addClass("current");
        }

    });


    }

var $container = $('ul.gallery')
// initialize Isotope
$container.isotope({
  // options...
  resizable: false, // disable normal resizing
  // set columnWidth to a percentage of container width
  masonry: { columnWidth: $container.width() / 4 }
});

// update columnWidth on window resize
$(window).smartresize(function(){
  $container.isotope({
    // update columnWidth to a percentage of container width
    masonry: { columnWidth: $container.width() / 4 }
  });
});

// trigger isotope again after images have loaded
$container.imagesLoaded( function(){
  $(window).smartresize();
});


});
        </script>

I'm doing a four across responsive design, you'll have to modify this according to your layout and change the classes and ids. Make sure to marry up with the ones called in the html to the ones used in the jQuery.. #filter ul.gallery etc., and close all tags, this system is not showing the closing </ul>