Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Just getting the masonry layout to work! Please!

Hello. I was trying to do this with masonry.js, and tried it with isotope also and for the life of me cannot get it to work. all I want is for the masonry layout to work where the height of the tallest div in each row does not define where the next row starts. Here is snippets of my code. Any help would be much appreciated. Right now, it's not working at all, and it's overriding my image size defined in my CSS.

Thanks a lot!

Markup: SCRIPTS:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script>
    $('#content_container').isotope({
    itemSelector : '.galleryItem',
    });
</script>

DIVS: (x8)

<div class="content_container">  
   <div class="grid_3 galleryItem">
      <a href="#"><img src="img/testThumb1.jpg" alt="Thumbnail 1"></a>
   </div>

   [...]
</div>

CSS:

.grid_1 { width: 6.5%; } /* 65px/1000px = 0.065px */
.grid_2 { width: 15%; } /* 150px/1000px =  0.15px */
.grid_3 { width: 23.5%; } /* 235px/1000px = 0.235px */
.grid_4 { width: 32%; } /* 320px/1000px = 0.32px */
.grid_5 { width: 40.5%; } /* 405px/1000px = 0.405px */
.grid_6 { width: 49%; } /* 490px/1000px = 0.49px */
.grid_7 { width: 57.5%; } /* 575px/1000px = 0.575px */
.grid_8 { width: 66%; } /* 660px/1000px = 0.66px */
.grid_9 { width: 74.5%; } /* 745px/1000px = 0.745px */
.grid_10 { width: 83%; } /* 830px/1000px = 0.83px */
.grid_11 { width: 91.5%; } /* 915px/1000px = 0.915px */
.grid_12 { width: 100%; } /* 1000px/1000px = 1 */
#content_container{
    width: 90%; /*width: 1000px;*/
    max-width: 1000px;
    margin: auto;
}

.galleryItem {
    color: #797478;
    font: 10px/1.5 'Oxygen', sans-serif;
    margin: auto;

}

.galleryItem h3 {
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.galleryItem img {
    width: 100%;
    margin: auto;

}

.galleryItem p {
    color: #797478;
    font: 9px/1.5 'Oxygen', sans-serif;
    letter-spacing: 0.18em;
}
User Gravatar

user130

Posted Aug 13 2013 16:54 UTC

$10


  • Assigned To guyisra
  • Solved
  • jquery
    isotope
    masonry
  • 2508 Views

3 Replies


You have several of tiny mistakes

See this fiddle http://jsfiddle.net/SnRcK/

Mostly, you used you container as a #id selector and not .class selector

I've removed the code that is not relevant to the problem.

Also, part of the problem was that .grid_3 has a relative width, which once removed isotope works fine.

Tell me if that is what you intended to do

User Gravatar

guyisra

Posted Aug 13 2013 19:06 UTC

Can't edit - so look at this fiddle as well - http://jsfiddle.net/SnRcK/1/

I've added the images, each on different sizes so you can see how it works masonry syle

User Gravatar

guyisra

Posted Aug 13 2013 19:12 UTC

Solution

This didn't solve your task? Get your own custom solution.

THank you very much for the help! I don't know how to get you the $10 but I will work it out ASAP.

Once again, thank you very much.

User Gravatar

user130

Posted Aug 13 2013 20:59 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions