Added the includes on top of the scirpt - and works like a charm.
<script src="<?=base_url();?>includes/js/jquery.min.js"></script>
<script src="<?=base_url();?>includes/js/masonry.pkgd.js"></script>
<script>
--Scripty Script--
</script>
Pergunta
I'm trying to apply Masonry to this batch of code:
<?php
//If There Are No Posts In The DB
if(condition) : ?>
<p> There Are Currently No Posts On This Site.</p>
<?php
//If There Are Posts In The DB - Loop Through All The Posts
else : ?>
<div id="masonry-grid">
<div class="gutter-sizer">
<?php foreach ($a as $b) :
<div class="grid-item">
<img src="source/of/the/image">
</div>
<?php endforeach; ?>
</div>
</div>
<script>
$(document).ready(function(){
var $container = jQuery('#masonry-grid');
$container.masonry({
columnWidth: 200,
itemSelector: '.grid-item'
});
});
</script>
<?php endif;?>
It doesn't quite line up the images in the way masonry is suppose to. I've checked my classes and id's match as per here, and that my jQuery + Masonry files are loaded correctly (in a separate header file) as per here.
I'm contemplating whether this is a question of code placement within the document, but changing it's location doesn't quite seem to solve the problem.
Solução
Added the includes on top of the scirpt - and works like a charm.
<script src="<?=base_url();?>includes/js/jquery.min.js"></script>
<script src="<?=base_url();?>includes/js/masonry.pkgd.js"></script>
<script>
--Scripty Script--
</script>