I managed to get this working by hacking the following together...
$(document).ready(function () {
$("#topnav .services a").click(function() {
$("#topnav .services a.alert").removeClass('alert'); // unhighlight selected nav item...
$(this).addClass('alert'); // ...and highlight new nav item
$("#topnav .all a.alert").removeClass('alert');
$("#bodycopy").html("");
$.get($(this).attr('href'), function(data) {
$("#bodycopy").hide().html(data).fadeIn(500);
});
return false;
});
var ias = $.ias({
container: "#container",
item: ".item",
pagination: "#pagination",
next: ".next a"
});
ias.extension(new IASTriggerExtension({
text: 'Load more', html: '<div class="ias-trigger" style="text-align: center; cursor: pointer;"><a class="button round large alert">{text}</a></div>',
}));
ias.extension(new IASSpinnerExtension({
src: 'http://staging.humanafterall.co.uk/v3-vanilla/images/spinner.gif',
}));
});
Which references this code...
<ul id='topnav' class='inline-list'>
<?php
$homepage = $pages->get("/work/services/");
$children = $homepage->children;
echo"<li class='all'><a class='button round alert' href='javascript: window.location.reload()'>All</a></li>";
foreach($children as $child) {
echo "<li class='services'><a class='button round' href='{$child->url}'>{$child->title}</a></li>";
}
?>
</ul>
Basically the click function for the services removes the 'alert' class for the 'all' button. The all button is also a window.location.reload() link so the whole page gets loaded again rather than just using the AJAX, thus making the InfiniteScroll work again. Hacky but it works!
