Masonry UL LI lister, images don't fit together

Question

I'm trying to use isotope to make images show in a masonry style.

I've included the following in my header:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
        <script>
            var $container = $('.album-lister');
            $container.isotope({
                itemSelector: '.thumb',
                masonry: {
                    columnWidth: 100
                }
            })
        </script>

My HTML looks like this:

<ul class="album-lister">
    <li class="thumb"><img src="http://localhost/57898d673ae1f7482d04ab1c3de60363.jpg"></li>
    <li class="thumb"><img src="http://localhost/behind_scenes_1.jpg"></li>
    <li class="thumb"><img src="http://localhost/behind_scenes_2.jpg"></li>
    <li class="thumb"><img src="http://localhostbehind_scenes_3.jpg"></li>
</ul>

I've added the following CSS:

.album-lister .thumb img{ max-width: 100%;height:auto;}
.album-lister .thumb{width:20%;}

What am I missing? Nothing is resized to 100px and there is no difference.

Edit: I have tried using imagesLoaded as suggested:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
        <script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

var $container = $('.album-lister').imagesLoaded( function() { $container.isotope({ itemSelector: '.thumb', layoutMode: 'fitRows', masonry: { columnWidth: 100 } }); });

Just FYI - the answer by Makinovic works.....becuase you already have the images cached in your browser. Now try it again incognito. — McNab, Apr 24 '15 at 14:59

score 2 · Answer 1 · answered Apr 24 '15 at 14:52

2

Try this:

<script type="text/javascript">

 jQuery(document).ready(function () {
            var $container = $('.album-lister');
            $container.isotope({
                itemSelector: '.thumb',
                masonry: {
                    columnWidth: 100
                }
            })

  });

answered Apr 24 '15 at 14:52

Alex Coloma

651
3
8

I've tried this, and although it makes it do something I cannot work out how to make it use the specified column width. It doesn't make the columns 100px wide. – Francesca Apr 24 '15 at 15:04

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

You are firing the JS in the head before the images are loaded. The best way to handle this is to use imagesLoaded, which will wait until the images are loaded before Isotope runs. That is better than waiting for $(document).ready() because Isotope needs to know the image sizes to handle the layout properly, and it only gets them after they have loaded.

Read more here;

http://isotope.metafizzy.co/appendix.html

Your code would be;

jQuery(document).ready(function () {
  var $container = $('#album-lister');

  $container.imagesLoaded( function(){
      $container.isotope({
          itemSelector: '.thumb',
          layoutMode: 'fitRows',
          masonry: {
              columnWidth: 100
          }
      });
  });
});

And I see you have to load the imagesLoaded plugin separately now, it was actually taken over by Dessandro who wrote Isotope;

https://github.com/desandro/imagesloaded

Here is some more debugging on another SO thread.

Isotope display gallery after images loaded

Just a few final points - I would use an id for the container rather than a class and I would not have each item as an unordered list;

<div id="album-lister">
    <div class="thumb"><img src="http://localhost/57898d673ae1f7482d04ab1c3de60363.jpg"></div>
    <div class="thumb"><img src="http://localhost/behind_scenes_1.jpg"></div>
    <div class="thumb"><img src="http://localhost/behind_scenes_2.jpg"></div>
    <div class="thumb"><img src="http://localhostbehind_scenes_3.jpg"></div>
</div>

Semantically it's not a list and you will just make your CSS life harder by marking it up like that.

edited May 23 '17 at 12:22

Community

1
1

answered Apr 24 '15 at 14:53

McNab

6,767
4
35
55

Sorry I have edited to explain - you would include that in `$(document).ready()` and you would make sure you included the imagesLoaded plugin. That's the `imagesloaded.js` file in the Github link – McNab Apr 24 '15 at 15:11
Hi there, this works but all my images just output full width. They don't fit together at all. If I set the width with CSS then the images fit together but the bottom 5 all layer on top of each other weirdly. Am I misunderstanding the use of columnWidth? It doesn't actually do anything? – Francesca Apr 24 '15 at 15:11
For example I expected setting columnWidth to 100 would give me a grid that fits together with the columns being 100px wide. But it doesn't actually do anything. Where do I set the width? – Francesca Apr 24 '15 at 15:12
What happens if you add `layoutMode: 'fitColumns'` in the line above masonry? http://isotope.metafizzy.co/layout-modes.html – McNab Apr 24 '15 at 15:15
For reference, if I set everything to a width with CSS and make it inline-block it does this, which is what is expected. But no masonry in sight: http://grab.by/GJwe – Francesca Apr 24 '15 at 15:18
If I turn off all that styling then it just outputs the images at their size: http://grab.by/GJwo – Francesca Apr 24 '15 at 15:19
See my final amends, I'll leave it at that, that's the best I can do. – McNab Apr 24 '15 at 15:20
Thanks but that's exactly what I've got. Do you know of a masonry-esque plugin that does work? This one doesn't seem to do anything. – Francesca Apr 24 '15 at 15:22

Masonry UL LI lister, images don't fit together

2 Answers2