Created
July 26, 2012 01:07
-
-
Save john-henry/3179683 to your computer and use it in GitHub Desktop.
Infinite Scroll & Masonry in ExpressionEngine
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
it works for me on EE2.9.2
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
A reply would be highly appreciated …