Quantcast
Channel: WordPress › Support » Forum: Hacks - Recent Topics
Viewing all articles
Browse latest Browse all 8245

dgissen on "Jquery Masonry bricks not appearing/loading"

$
0
0

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


Viewing all articles
Browse latest Browse all 8245

Trending Articles