Instantly share code, notes, and snippets.

Embed
What would you like to do?
Infinite Scroll & Masonry in ExpressionEngine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="container">
{exp:channel:entries channel="articles" dynamic="no" orderby="date" sort="asc" status="not closed" paginate="bottom" limit="12"}
<div class="article">
<h2>{entry_id} - {title} </h2>
<p>{article_summary}</p>
</div>
{paginate}
<div class="pagination">
{pagination_links}
{previous_page}
<a href="{pagination_url}" class="newer">Previous Page</a>
{/previous_page}
{next_page}
<a href="{pagination_url}" class="older">Next Page</a>
{/next_page}
{/pagination_links}
</div>
{/paginate}
{/exp:channel:entries}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<!-- <script src="/assets/js/jquery.masonry.min.js" type="text/javascript"></script> -->
<script src="/assets/js/jquery.infinitescroll.js" type="text/javascript"></script>
<!-- Use forked Version availabe here : https://github.com/DeadCat/infinite-scroll/ -->
<script>
var $wall = $('.container');
//Masonry - Uncomment for use
/*
$wall.masonry({
columnWidth: 340,
gutterWidth:0,
isAnimated : true,
resizeable: true,
itemSelector : '.article'
});
*/
//Infinite scroll
$wall.infinitescroll({
navSelector : 'div.pagination',
nextSelector : 'div.pagination a.older',
itemSelector : '.article',
loading: {
finishedMsg: "End of the line!",
img: "/assets/img/ajax-loader.gif",
msgText: "<em>Loading articles...</em>"
},
animate : true,
extraScrollPx: 150,
extractLink: true,
pathParse: function() {
return ['http://ws-expressionengine:8888/articles/P','']
},
debug: true,
errorCallback: function() {
// fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// Call Masonry as a callback - Uncomment for use
/*
function( newElements ) {
var $newElems = $( newElements );
$(this).masonry( 'appended', $newElems );
}
*/
);
</script>
</body>
</html>
@marypo

This comment has been minimized.

Show comment
Hide comment
@marypo

marypo Oct 26, 2014

Hi,
This IS working great with EE up to v 2.8.1.! Unfortunately, it doesn't work with the latest EE version 2.9.2 and I had to downgrade again. I don't want to be shameless but I'm not a coder so could you adapt it to work with EE version 2.9.2?
Regards,
marypo

PS: Just tried to switch PHP Version from 5.3 (Apache) to 5.4.33 (FastCGI) with EE 2.8.1 to see if it is PHP related. It obviously is … Infinite scroll stops working with PHP 5.4.33!

marypo commented Oct 26, 2014

Hi,
This IS working great with EE up to v 2.8.1.! Unfortunately, it doesn't work with the latest EE version 2.9.2 and I had to downgrade again. I don't want to be shameless but I'm not a coder so could you adapt it to work with EE version 2.9.2?
Regards,
marypo

PS: Just tried to switch PHP Version from 5.3 (Apache) to 5.4.33 (FastCGI) with EE 2.8.1 to see if it is PHP related. It obviously is … Infinite scroll stops working with PHP 5.4.33!

@pirco

This comment has been minimized.

Show comment
Hide comment
@pirco

pirco Nov 7, 2014

I'm getting double entries loaded. is that a common issue?

pirco commented Nov 7, 2014

I'm getting double entries loaded. is that a common issue?

@marypo

This comment has been minimized.

Show comment
Hide comment
@marypo

marypo Jan 16, 2015

A reply would be highly appreciated …

marypo commented Jan 16, 2015

A reply would be highly appreciated …

@Penworks

This comment has been minimized.

Show comment
Hide comment
@Penworks

Penworks Jan 25, 2015

it works for me on EE2.9.2

Penworks commented Jan 25, 2015

it works for me on EE2.9.2

@marypo

This comment has been minimized.

Show comment
Hide comment
@marypo

marypo Mar 4, 2015

Thanks for your reply, Penworks. What version of PHP do you work with?
(In the meantime, I tried again and couldn't get it to work in EE 2.9.2, so the issue must be another.)

marypo commented Mar 4, 2015

Thanks for your reply, Penworks. What version of PHP do you work with?
(In the meantime, I tried again and couldn't get it to work in EE 2.9.2, so the issue must be another.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment