I’m using a child WordPress theme (Blanco) and trying to make an image gallery page using jQuery Masonry, except the masonry function doesn’t seem to be working, everything just looks like it’s floating. The columns have vertical gaps. There’s also an error being detected by FireBug. TypeError: $("#pincontainer").masonry is not a function The gallery is located here: www.christaalexandra.com/gallerie/
I have the following code in my header:
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/js/jquery.masonry.min.js"></script>
<script language="javascript" type="text/javascript">
// This line tells the script to run after the page is loaded,
// As well as allows you to use the `$` function within the script
jQuery(function($) {
$('#pincontainer').masonry({
itemSelector: '.pin-gallery',
});
});
</script>
I have the following CSS in my stylesheet:
#pincontainer{
margin:0 auto;
margin-top:50px;
}
.pin-gallery{
width: 220px;
margin: 10px;
float: left;
}
My Gallery page has the following HTML:
<div id="pincontainer">
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/baby_shower_invitation_rocket_baby_spaceship_thank_you_card_stars_1.jpg" alt="" /></div>
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/black_and_white_inspiration_wedding_invitations.jpg" alt="" /></div>
<div class="pin-gallery"><img src="/wp-content/uploads/2012/11/blue_rope_ship__ocean_nautical_baby_shower_invitation_thank_you_card_4.jpg" alt="" /></div>
...(more div's here)...
</div>
<!--End Container-->
Why isn’t my gallery stacking correctly? The JS file exists in the JS folder in my child template, should it be somewhere else? I’ve spent hours researching this, and feel as though I’ve check and double checked potential problems, but I’m at a beginner level, so it could be something very obvious. I would appreciate your help, thank you in advance!
