Hi Everyone:
I am trying to use jquery masonry on the home page of this test site
Much of what I am implementing is based on principles in Morten Rand-Hendrikson's tutorial on jquery masony. I just copied the function with a few modifications.
As you can see, the masonry script enqueues, but the itemSelector .photo-entry is not being transformed into a "masonry brick". I can't tell if the problem is with the function.php, home.php, or the style sheet. funtion.php and home.php are below.
function anaximander_masonry() {
if (!is_admin()) {
wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.0.110526' );
wp_enqueue_script('jquery_masonry');
add_action('wp_footer', 'anaximander_add_masonry');
function anaximander_add_masonry() { ?>
<script>
jQuery(document).ready(function($){
$('#masonry-index').masonry({
itemSelector: '.photo-entry',
isAnimated: true
});
});
</script>
<?php
}
}
}
add_action('init', 'anaximander_masonry');
<?php get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<!-- Begin loop for latest photos -->
<?php if ( have_posts() ) : ?>
<section id="masonry-index" class="group">
<?php while ( have_posts() ) : the_post(); ?>
<div class="photo-entry">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<footer>
<h2><?php the_title(); ?></h2>
<p class="date"><?php the_time('m.d.Y'); ?></p>
</footer>
</a>
</div>
<?php endwhile; ?>
</section><!-- #masonry-index -->
<?php else : ?>
<!-- Message if there are no photos -->
<p><?php _e( 'Please check back soon for more photos!', 'twentytwelve' ); ?></p>
<?php endif; ?>
<!-- End loop -->
<!-- Navigation for older and newer posts -->
<nav class="photo-navigation">
<p class="previous-photos">
<?php next_posts_link('‹ Older posts '); ?>
</p>
<p class="newer-photos">
<?php previous_posts_link('Newer posts ›'); ?>
</p>
</nav>
</div>
</div>
<?php get_footer(); ?>
ps. I'm using a childtheme