Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

isotope manual trigger

7:29 pm on Dec 30, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0

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>
<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>
<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>
<?php endwhile; // end of the loop. ?>

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

var $container = $('#cat-items');
$container.imagesLoaded( function(){
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 type="text/javascript">

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 ) );


Any ideas?
12:39 pm on Jan 2, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:July 4, 2007
posts: 183
votes: 0

I've managed to fix the second question I had. For some reason there was some weird coding going on in the extra posts that appeared.