I recently ran into some problems trying to setup Infinite scroll on my tumblr with masonry. I found some code, and it worked perfectly on the demo website: http://www.jquery4u.com/demos/infinite-scrolling-demo1/ But on my tumblr only the Masonry part works, but not the infinite scrolling part. Here is my Javascript:
<script>
$(function(){
var $container = $('SECTION');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item',
columnWidth: '.item',
isFitWidth: true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#nextPage', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
msnry.appended( $newElems );
});
}
);
});
</script>
Here is the html for the next Page link:
{block:Pagination}
<nav id="page-nav">
{block:NextPage}
<a style="color:red;" id="nextPage" href="{NextPage}">Next</a>
{/block:NextPage}
</nav>
{/block:Pagination}
I do already have the Masonry, ImageLoaded, and Infinite Scrolling scripts linked. As I said, The masonry works fine, but the infinite scroll seems to be doing nothing at all. The next link is also working too, since I tested it and it does take me to the next page. But again the Infinite scrolling does nothing whatsoever. If anyone could help it would be very appreciated, or if you have any other suggestions or alternatives, that would also be nice.
Its hard to tell without a demo link, but looking at the example you used for reference:
msnry.appended( $newElems );
There should throw an error saying undefined. This is due to msnry.appended.
The line should be:
$container.masonry( 'appended', $newElems, true );
Source: http://www.jquery4u.com/demos/infinite-scrolling-demo1/
Related
I cant figure out how to have the initial fadein animation when masonry is initialized at first page load exactly like the original plugin's page:
http://masonry.desandro.com/
Any help suggestions?
I used the imagesLoaded progress deferred API and Masonry's appended method.
$('#load-images').click( function() {
var $items = getItems();
// hide by default
$items.hide();
// append to container
$container.append( $items );
$items.imagesLoaded().progress( function( imgLoad, image ) {
// get item
// image is imagesLoaded class, not <img>, <img> is image.img
var $item = $( image.img ).parents('.item');
// un-hide item
$item.show();
// masonry does its thing
$container.masonry( 'appended', $item );
});
});
Items are first hidden, then appended to the container. After each item is loaded, it un-hidden then gets revealed by Masonry.
Source: http://codepen.io/desandro/pen/iHevA
Have been using Paul Irish infinite scroll for the last few sites i've built but this new project has quite a lot of new callbacks for new elems.
The issue right now though is that the "No More Posts" finished message is not showing once is reaches the end of the sites internet and also the loading images is not being displayed during loading intervals.
Was wondering if anybody could spot something in the code I couldn't see. Would much appreciate it !
//Infinite Scroll
var $tilegrid = $('#content');
var $initialNumberOfPosts = $('.post').length; // Get number of posts
$tilegrid.infinitescroll({
navSelector: ".load-more-btn",
nextSelector: ".load-more-btn",
itemSelector: ".post",
behavior: 'twitter',
loading: {
finishedMsg: 'No more posts',
img: 'http://static.tumblr.com/cmghtlm/zWPnh0xhe/ajax-loader.gif',
}
},
function ( newElements ) {
//call for likes
var $currentNumberOfPosts = $('.post').length;
var pageNumber = Math.ceil($currentNumberOfPosts / $initialNumberOfPosts);
Tumblr.LikeButton.get_status_by_page(pageNumber);
//images loaded isotope
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.isotope( 'appended', $newElems, true );
});
//photoset slider
$('.photoset-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
I am trying to set up infinite scroll for days now on my site.
Finally i found a plugin that almost works - jetpack.
PROBLEM: When you scroll down, freshly loaded posts are put on top of the displayed ones.
SOLVED...solution see answer
How do we solve this?
SOLUTION SUGGESTION? Maybe it has to do with the fact that my theme uses java-masonry for the grid display and I found this tutorial page providing code snippets to deal with that.
Maybe I enqueued them wrong?
I added this in the bottom of my functions.php to enqueue the script and configure jetpack
// Jetpack infinite js addon
wp_register_script('ininite-addon', (get_template_directory_uri()."/js/infinite-addon.js"),'infinite-addon',false,true);
wp_enqueue_script('infinite-addon');
// Jetpack infinite scroll
add_theme_support( 'infinite-scroll', array(
'container' => 'post-area',
'footer' => 'footer',
'wrapper' => false,
'posts_per_page' => '7',
) );
and this is the file I created called infinite-addon.js according to the tutorial mentioned above:
jQuery( document ).ready( function( $ ) {
infinite_count = 0;
// Triggers re-layout on infinite scroll
$( document.body ).on( 'post-load', function () {
infinite_count = infinite_count + 1;
var $container = $('#content');
var $selector = $('#infinite-view-' + infinite_count);
var $elements = $selector.find('.hentry');
$elements.hide();
$container.masonry( 'appended', $elements, true );
$elements.fadeIn();
});
});
Thank you SO MUCH for any help !!! And let me know if you need more of my code!
Solved the problem.
I found a file called funtions.js in my theme's /js/ directory which contained the following code, obviously for making masonry work:
$(document).ready(function() {
$('#post-area').masonry({
// options
itemSelector : '.post',
// options...
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false
}
});
});
I just deleted this and replaced it with the snippet above, and now it works like magic!
Currently I'm using AJAX to pull in data from our webservice. The issue I'm having is that it doesn't want to load the data into the masonry layout, everything in .social_block floats left one under the next (and I haven't set any float for these). So masonry isn't working :(
I wanted the following to happen: Load initial items from webservice in the masonry layout and on "infinite" scroll it would make the paged request from the webservice to append new items into the masonry layout.
So the questions are as follows:
- Why aren't my webservice items loading using masonry and just loading to the left of page?
- How can I use infinite scroll with my existing AJAX request so it pulls in new data into the masonry layout using the paging code I have in place as (first request load http://example.com/ automatically, second request load http://example.com/1 on first infinite scroll, third request http://example.com/2 on second infinite scroll, etc.)?
As an added note, if I add in an alert rather than console.log before line $container.imagesLoaded(function(){ it seems to slow things down but then loads the initial request into masonry format - weird!
<div id="container">
</div>
<p id="loadmore">
<button id="more">'Load More!</button>
</p>
<script src="js/vendors/jquery/jquery-1.10.0.min.js"></script>
<script src="js/vendors/masonry/jquery.masonry.min.js"></script>
<script src="js/vendors/jquery/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $container = $('#container');
//alert('Masonry loads items in the nice layout if I do this');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.block',
columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '#loadmore', // selector for the paged navigation
nextSelector : '#more', // selector for the NEXT link (to receive next results)
itemSelector : '.block', // selector for all items to retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
// set here so it is in reach
var page = 0;
// this will call the required url with new json data.
function loadPage(page) {
var url = 'http://example.com/' + page;
$.getJSON(url, function(data) {
var cont = $('#container');
$.each(data.data, function(index, obj) {
var item = obj.Message;
cont.append(
$('<li>', {"class": "block"}).append(
$('<span>', {"class": item.Type}).append(
$('<span>', {"class":"post_image"}).append(
$('<img>', {src:item.postImageLarge})
)
)
)
)
)
});
//$.each(data.data, function(key, val) { console.log('Data key: ', key, ', Value: ', val)});
});
}
// load more handler
$('#more').click(function(){
page = page + 1;
loadPage(page); //load more items
});
// initial run with page empty
loadPage('');
});
</script>
I'm trying to use infinite scroll but nothing is happening at all when I scroll down. This is how my current pagination looks:
<ul class="elgg-pagination">
<li class="elgg-state-disabled"><span>« Previous</span></li>
<li class="elgg-state-selected"><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>Next »</li>
</ul>
This is how my javascript looks:
$(window).scroll(function(){
var mostOfTheWayDown = ($(document).height() - $(window).height()) * 9 / 10;
if ($(window).scrollTop() >= mostOfTheWayDown){
$container.infinitescroll({
navSelector : $('a',find('.elgg-state-selected')), // selector for the paged navigation
nextSelector : $('a',find('.elgg-state-selected').next('li').not('.elgg-state-disabled')), // selector for the NEXT link (to page 2)
itemSelector : '.item1', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
}
i would recommend this plugin , dont waste your time reinventing the wheel , enjoy the awesomeness of jQuery !
http://www.infinite-scroll.com/
// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#content div.post"
// selector for all items you'll retrieve
});
you may also try this :
http://airbnb.github.io/infinity/demo-on.html