CODEWITHSUNDEEP
phpjqueryalignmentjquery-masonry
Nena Dagloos
Nena Dagloos

Reputation: 31

Struggling with Jquery Masonry alignment

I keep struggling with masonry. It seems it is trying to do it's work, but it's not aligning properly. I have been trying to fix it for hours now. I searched here and found people with the same problem, but the solutions didn't work for me. Here is all the code:

<div id="container">
    <?php while (next_news()): ?>
<div class="newsitem">
<span class="newstitle"><?php printNewsTitleLink(); ?></span>
<span class="newsdate"><?php printNewsDate(); ?></span>
<span class="newscontent"><?php printNewsContent(); ?></span>
</div>    
    <?php endwhile; ?>
</div>

CSS Code:

div.newsitem {
    width:215px;
    text-align:justify;
    margin:5px;
    padding:15px;
    float: left;
    font-size:12px;
    background-color:#FFF;
}

#container {
    display:inline-block;
}

Here's the script, I did try to give the columns a width or change the Gutterwidth, but nothing worked:

My Script:-

<script>
$(function(){
$('#container').masonry({
itemSelector: '.newsitem'
});
});
</script>

And here the included files to make it all work:

<script src="<?php echo $_zp_themeroot; ?>/js/jquery-1.7.2.min.js"></script>
<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>

And where it should be working: http://dagloos.com/lust/index.php?p=news Please help me, I would really appreciate it. I'm about to pull out my hair over this.

Upvotes: 2

Views: 1986

Answers (3)

Jithin
Jithin

Reputation: 2604

In the console, its clearly says that it couldn't load masonry.

TypeError: Object [object Object] has no method 'masonry'

Upvotes: 0

Nena Dagloos
Nena Dagloos

Reputation: 31

I figured out what the problem was!

<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>

Just had to be placed AFTER the fancy box script.

Upvotes: 1

Kush
Kush

Reputation: 1522

Firstly, try putting 

  $(function(){$('#container').masonry({ itemSelector: '.newsitem' }); });

inside the 

$(document).ready(function() {

function, it should work then I think.

Shot in the dark but try and replace:

div.newsitem {}

with 

.newsitem{}

Sidenote: 

<script type="text/javascript" src="/lust/themes/bottomline/js/jquery.fancybox-buttons.js"></script>

currently leads to a 404.

Upvotes: 0

Related Questions