isotope manual trigger

Been struggling with this for a few days now. Can't quite figure out what I'm doing wrong. Two things…

1. When using the manual trigger to load another page of content the blocks (.block) appear below the original page and seem to travel down the page into position, rather than just appearing where they're supposed to.

2. I'm using this in a Wordpress template and loading posts. Posts seem to load correctly but the last page of posts are completely wrong i.e. if I load an author's posts on the author template, the last batch of posts are completely random posts not written by them.

Here's the template code:


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <script src="<?php bloginfo( 'template_directory' ); ?>/scripts/jquery.isotope.min.js"></script>
 <script src="<?php bloginfo( 'template_directory' ); ?>/scripts/jquery.infinitescroll.min.js"></script>
 <script src="<?php bloginfo( 'template_directory' ); ?>/scripts/manual-trigger.js"></script>
 <script src="<?php bloginfo( 'template_directory' ); ?>/scripts/imagesloaded.pkgd.js"></script>
 <script src="<?php bloginfo( 'template_directory' ); ?>/scripts/respond.min.js"></script>
</head>
<body class="">

<ul id="cat-items" class="clearfix masonry">
<?php while ( have_posts() ) : the_post(); ?>

<li class="g_3 block">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if(has_post_thumbnail()): ?>
 <?php the_post_thumbnail('cat-img'); ?>
<?php else: ?>
 <img src="<?php bloginfo( 'template_directory' ); ?>/images/ph.png" width="300" height="200" alt="<?php the_title(); ?>" />
<?php endif ?>
<div class="details clearfix">
<h2 class="title"><?php the_title(); ?></h2>
<div class="date"><?php the_time('jS M, Y') ?></div>
</div>
</a>
</li>
<?php endwhile; // end of the loop. ?>
</ul>

<div id="next-page" class="g_12 clearfix">
<div class="button">
<?php next_posts_link('Show more posts', 0); ?>
</div>
</div>

<script>
 var $container = $('#cat-items');
 $(window).load(function(){
 $container.imagesLoaded( function(){
 $container.fadeIn(4000).isotope({
  itemSelector: '.block',
  getSortData : {
name : function ( $elem ) {
return $elem.find('.title').text();
},
date: function ($elem) {
return Date.parse($elem.find('.date').text());
},
  },
  sortBy : '.date',
  sortAscending : true,
 });
 });
 });
</script>

<script type="text/javascript">

$container.infinitescroll({
 navSelector : '#next-page',
 nextSelector : '#next-page a',
 itemSelector : '.block',
 behavior: 'twitter',
 loading: {
  msgText: 'Loading...',
  finishedMsg: 'No more pages to load.',
  img: '<?php bloginfo( 'template_directory' ); ?>/images/ajax-loader.gif'
 }
 },
 // call Isotope as a callback
 function( newElements ) {
 $container.isotope( 'appended', $( newElements ) ); 
 }
);

</script>
</body>
</html>

Any ideas?

isotope manual trigger

greencode

greencode

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week