Question

I’ve tried applying the Masonry http://masonry.desandro.com/ JS to make the images float under each other but it doesn’t seem to work.

I’ve used the following function – what have I done wrong? CSS issue maybe?

<script>
  $(function(){

    $('.cycler-wrap').masonry({
      itemSelector: '.cycler-container',
      columnWidth: 100
    });

  });
</script>

Updated the site as per Kelvin’s response below. Now just a cycle issue 🙁

Answer 1

The problem here is your .cycle-container elements are 0 pixels high, because your img elements are absolutely positioned, which takes them out of the document’s flow.

If you make your .cycler img elements position:relative instead, masonry should work as expected. Since your images are display:inline, to keep cycler working you actually only need to make the first image position:relative:

.cycler img{
    position: absolute;
    top:0;
    left:0;
}

.cycler img:first-child{
    position:relative;
}

Of course, not all browsers support :first-child, so it might be better to just add a .first class to the first image in each group and use that as the selector instead.