why isn't masonry loading my database data? - php

Question

Can anyone give me a working example of a html page loading it's content with json data using masonry plugin?
I have this code but it doesn't load anything :
PHP file :
<?php
$con = mysqli_connect("localhost", "*", "*", "scratch");
mysqli_query($con,"SET NAMES UTF8"); //é preciso meter isto em utf-8 senão não manda nada
if (!$con)
{
die('Could not connect: ' . mysqli_error());
}
$result = mysqli_query($con,"SELECT * FROM posts ORDER BY IdPost DESC") or die;
while($row = mysqli_fetch_assoc($result))
{
$output[]=$row;
}
print(json_encode($output, JSON_UNESCAPED_UNICODE));
mysqli_close($con);
?>
So, it gets me this json :
[{"IdPost":"5","Title":"Social Networks Blueprints","PostContent":"Main Social Networks Blueprints","TypePublic":"1","IdCategory":"1","PostDate":"2014-11-16 00:00:00","PostImage":"http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg","IdUser":"2"},{"IdPost":"3","Title":"* New iPhone 5 ","PostContent":"Check out this new piece of pure technology","TypePublic":"1","IdCategory":"1","PostDate":"2014-11-16 00:00:00","PostImage":"http://images.visitcanberra.com.au/images/canberra_hero_image.jpg","IdUser":"3"},{"IdPost":"2","Title":" New Samsung Galaxy S4 *","PostContent":"The specs are awesome. Check this graphic","TypePublic":"1","IdCategory":"1","PostDate":"2014-11-16 00:00:00","PostImage":"http://www.studiotv.com.au/wp-content/uploads/2014/07/Klimas-website-edited.jpg","IdUser":"2"}]
now the HTML part of the FILE that matters:
<div id="main">
<div id="main-inner">
<div id="container" class="js-masonry"data-masonry-options='{ "columnWidth": 2, "itemSelector": ".item" }'>
<div class="gride-sizer"></div>
<!--Open Modal faz o pop-up-->
<div class="item open-modal">
<!-- CCODIGO PARA 1 SECÇÃO DE COMMENTS -->
<a href="#">
<img src="images/A.jpg"><img>
</a>
<div class="pinMeta">
<p class="pinDescription">
Tenda suspensa na arvore! O sonho de qualquer campista (ou qualquer bêbado) como eu! Não perca tempo, reserve já a sua!
</p>
<div class="pinSocialMeta">
<a class="socialItem likes" href="#">
1 like
</a>
</div>
</div>
<div class="pinUserAttribution">
<a class="attributionItem firstAttribution " href="#">
<img class="attributionImg" style="" src="images/profile.jpg"></img>
<span class="attributionTitle">
Publicado por
</span>
<span class="attributionName">
Pihh
</span>
</a>
<a class="attributionItem lastAttribution " href="#">
<img class="attributionImg" style="" src="images/profile.jpg"></img>
<span class="attributionTitle">
em
</span>
<span class="attributionName">Categoria 1</span>
</a>
</div>
</div>
It might miss a div or two because I copy-pasted it but when using the masonry plugin without json ( for fixed values it loads perfectly ).
now the CSS file:
#container .grid-sizer { width:100%;}
#container .item { width:15%; margin: 14px 7px 0px; background-color:#fff; border-radius: 4px 4px 4px 4px; box-shadow: 0px 4px 5px #888888; }
#container .item img { width:100%; height:400%%; border-radius: 4px 4px 0px 0px; }
#container .item img:hover { background:none repeat scroll rgba(255,255,255,0.1) }
#container .item w2 { width:200%; }
/*placed .open-modal at 400px so I can garantee that page remains in same position on when modals opened*/
.open-modal{
position: relative;
top: 400px;
}
So, this is it, I'm having quite a trouble to make this working and I'm totaly blank on this ( probably because I'm new to html and CSS, my expertise is on android - even the asynk tasks of android are really more easy for me and probably I'm having problems in that but if some one could give me a piece of working code I'll be trully greatfull and start to try to understand it .
Best regards,
Pihh
EDIT: I totally forgot the js part !
<script>
var body = $('body');
toggleModal = function () {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
$.ajax({
type: "POST",
url: "http://localhost/website2/posts.php",
data: '{ "pIdPost":' + $(this).attr('data-item') + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var Posts = response;
// var Posts = response.d;
var $boxes;
$.each(Posts, function (index, post) {
$boxes = $('<img src="' + post.PostImage + '" />');
$('#modal-main').html($boxes); //
// $('.modal-userthumb').attr('src', post.Users.UserImage);
// $('.modal-descriptioncreator').text(post.Users.Name + ' ' + post.Users.Surname);
$('.modal-descriptiontimeago').text('• 4 days ago');
$('.modal-descriptioncontent').text(post.PostContent);
});
$('#container').append($boxes);
$('#container').masonry('appended', $boxes, true);
$('#container').masonry();
},
failure: function (msg) {
alert(msg);
}
});
}
</script>