Masonry Chrome Inquiry - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
September 18, 2013 at 7:40 pm #150524

striderhiryux1
Participant

Hello All!

I’m trying to establish a portfolio page using masonry.
However, in trying to get masonry to be responsive and work properly,** I have found that I run into the problem of images stacking and overlapping in Google Chrome/Safari.** After readjusting the page, reloading, or clicking on the the pages links, the problem is fixed.

From what I can tell and have read, the problem is a matter of the images not loading completely yet as masonry is initializing. I have read about the imagesloaded fix for masonry, but do not know how to use it, as I am still relatively new to JS. **Can somebody give me a how to on using the imagesloaded plugin and is there any other way to fix this problem of masonry in Chrome of Safari?
**
Thanks.

September 19, 2013 at 8:52 am #150591

TheDoc
Member

Download the imagesloaded plugin here: https://github.com/desandro/imagesloaded

Follow these instructions: http://masonry.desandro.com/appendix.html#imagesloaded

Super easy!

September 19, 2013 at 2:27 pm #150624
striderhiryux1
Participant
I followed the instructions as far as I can understand them, but still have not gotten it to work. What is wrong? I am using the masonry and imagesloaded plugins as external libs. Below is the code in my header.
```
<html>
<head>
<meta charset="UTF-8">
<title>PLUM</title>
<link href="../../Documents/Unnamed Site 2/PlumRevision.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js">
 </script>

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"> </script>
<script type="text/javascript">

new imagesLoaded( elem, callback )

    </script>
</head>
```
Everything still works in FF, but not Chrome or Safari. This problem is driving me nuts because it seems to be a simple problem that many have been able to overcome, but I have not, so if anybody could show me what I am doing wrong, I’d be extremely grateful.
September 19, 2013 at 4:37 pm #150641

TheDoc
Member

Your scripts should be coming at the end of your document just before the closing </body> tag.

Also, in the code that you provided I can’t see you calling masonry? In the link I provided it gives you the exact code required to get it working (in fact, it gives you four different options of implementation!).

September 19, 2013 at 6:40 pm #150651
striderhiryux1
Participant
```
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">

    <title>PLUM</title>
    <link href="../../Documents/Unnamed Site 2/PlumRevision.css" rel="stylesheet" type="text/css">
    <style type="text/css"></style>
    <script src="//desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="//masonry.desandro.com/masonry.pkgd.min.js"> </script>
    </head>


    <body>
    <div id="logo">
    <img src="../../Documents/Unnamed Site 2/Plum-Script.png" width="475" height="275"
    class="works">
    </div>

    <div id="navigation">   
      <ul class="nav">
            <li><a href="">About<img src="../../Documents/Unnamed Site 2/About.jpg"></a></li>
            <li><a href="">Work<img src="../../Documents/Unnamed Site 2/Work.jpg"></a></li>
            <li><a href="">Contact<img src="../../Documents/Unnamed Site 2/Contact.jpg"></a></li>
            <li><a href="">Blog<img src="../../Documents/Unnamed Site 2/Blog.jpg"></a></li>
      </ul>
    </div>

    <hr>
    <div id="content" class="js-masonry"
      data-masonry-options='{ "columnWidth":59, "itemSelector": ".item"  }' '{...}'>
      <div id="fit-width" >
     <div class="item img">
          <a href=""> <img src="../../Documents/Unnamed Site 2/stacksracks3.jpg" width="576" height="360"alt="Racks and Stacks" />
        </a><p class="excerpt inner">Racks and Stacks</p></div>
    </div>
    </div>


    <hr>

<script type="text/javascript">

var msnry = new Masonry( container );
// layout Masonry again after all images have loaded
imagesLoaded( container, function() {
  msnry.layout();
});

</script>
    </body>

    <footer>
    <div id="footer">   
        <p> ©2013. </p>
    </div>
    </footer>

    </html>
```
This is my full html. I moved the script as you said to the end before the closing body tag, and the call I believe was used properly at the beginning of the content div which is comprised in the body in the beginning. Masonry works when I rescale the page and animates properly in firefox, however I still am not able to escape the fact that my images in Chrome/Safari keep overlapping and stacking on initial loading. If all else being correct what else can I do? Perhaps there’s a hack with jquery to reload the page after the initial load and cache?
September 19, 2013 at 6:43 pm #150652

striderhiryux1
Participant

There are multiple divs in the html, I just abbreviated them for the sake of ease in reading what I wrote, but they’re all formatted exactly the same as my initial div within the content div. Also, could it be a problem with my CSS?

September 19, 2013 at 10:03 pm #150659

striderhiryux1
Participant

Nevermind! I got everything to work once I started moving things around into a better semantic order. Thanks Doc for the advice, really got me heading in a good direction, not just for this site, but also in correct syntax.

May 13, 2014 at 10:28 pm #170127

geronimo
Participant

Hi,
I’m having problems getting this working too. Could someone take a look at my code and let me know what i’m doing wrong?

<script> $(document).ready(function() { var $container = $('.project-list'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.entry', columnWidth: function( containerWidth ) { return containerWidth / 3; }); }); }); </script>

Thanks for any help

May 13, 2014 at 10:30 pm #170128

geronimo
Participant

Sussed it…i literally just use the code from the masonry development site without specifying column widths:

var container = document.querySelector(‘.project-list’);
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘JavaScript’ is closed to new topics and replies.