I have successfully integrated masonry with infinite scroll but sometimes the posts overlap and don't "re-shuffle" and find their place, they just stay overlapped so a lot of posts get hidden.
You can see what I am talking about on my blog www.neuewave.tumblr.com
Sometimes refreshing or simply scrolling more slowly can stop the problem happening so often but I would like to permanently fix it, can anybody help me out here?
Note: I did not write any of the script for masonry or infinite scroll, I found resources online and had friends help me so try and keep that in mind when explaining things. Think "Layman's terms" haha.
Hey mate I figured this one out just today. The overlapping happens when the images haven't been loaded and masonry is triggered, you need to load the images before triggering masonry.
$container.infinitescroll({ navSelector : '.navigation', // selector for the paged navigation nextSelector : '.nav-previous a', // selector for the NEXT link (to page 2) itemSelector : '#content .feed', // selector for all items you'll retrieve },
// call Masonry as a callback function( newElements ) { 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 ); }); } ); }); </script>
make sure you modify the script with your theme's #content, itemSelector, navSelector, nextSelector and itemSelector.
Oh thanks, the link is: http://phony-false-frail.tumblr.com/
I've looked through the code, but I'm not sure where to look for what the selectors are called. I only have a very basic knowledge of coding :/
i've had problems with slider and other scripts which uses images, and because it takes time to load the image, the script fails, as it is triggered before the image has loaded.
a simple solution to that is to use
jQuery(window).load(function(){
your script here.......
})
instead of
jQuery(document).ready(function(){
your script here.........
})
this makes sure, that your scripts for that bit run only after everything (images) has successfully loaded
Hi guys, I don't know if any of you are active any more but I need help. I have no idea what I am doing, I have the same issue as Neue Wave, here's my blog; http://oluaidh.tumblr.com/
The posts are fine until a bit further down where they just overlay and no more posts are loaded. I've gone onto that link http://desandro.github.com/ but there are just loads of files that you can select and some are really long, i'm not sure what to use. I don't know where to put both of them (the desandro html and the one that ivancruz put up) in my HTML either.
I've posted the long script in both my description and HTML (I'm unsure of where to put it) and it still hasn't worked. I've changed my theme 100 times and they still over lap. I'm still unsure of what to do. Can someone help me please ?
@andy_unleash Thank you but, I'm new to all this coding stuff so I'm not exactly sure what to do. If I give you my html, would you be able to add the right stuff?
Could someone please send me the coding I need as I got infinte scroll then it all started overlapping this is my blog http://originalityisextinct.tumblr.com/
I've also been messing around for about an hour now with some of the "add into description" links but it overlaps constantly, as well as a column disappearing in the scrolled pages. Annoying :/ The problem seems to be that my original theme is in CSS... is this true? Even if I could extend the pages, mine are so short for some reason. .......Total coding newbie here.
So my code is updated, but eventually I still hit the overlapping problem. Mind you its after scrolling down though a couple of hundred images. But it still occurs though updating to the non-tumblr specific Infinite Scroll js did help prolong the problem farther down the page.
Any idea how else I can tweak my code to completely prevent this issue?
I think this is related as well. My site is shifting images when infinite scroll happens, and no videos after the scroll show. The site in http://conveniencetoconvene.tumblr.com. If anyone can help, it would be greatly appreciated!
You can see what I am talking about on my blog www.neuewave.tumblr.com
Sometimes refreshing or simply scrolling more slowly can stop the problem happening so often but I would like to permanently fix it, can anybody help me out here?
Note: I did not write any of the script for masonry or infinite scroll, I found resources online and had friends help me so try and keep that in mind when explaining things. Think "Layman's terms" haha.
I am using the imagesLoaded script from here: https://github.com/desandro/imagesloaded
Just load it on your header the same way you would any other js script then use the script as follow to load both masonry and Infinite scroll.
make sure you modify the script with your theme's #content, itemSelector, navSelector, nextSelector and itemSelector.
Sorry, but how do I find what they are in the code?
When you customize your theme and click on Edit HTML you'll be able see all of your theme's code.
If you post a link to your site I'm sure somebody will be able to point you in a right direction.
Oh thanks, the link is: http://phony-false-frail.tumblr.com/ I've looked through the code, but I'm not sure where to look for what the selectors are called. I only have a very basic knowledge of coding :/
following @ivancruz's post,
i've had problems with slider and other scripts which uses images, and because it takes time to load the image, the script fails, as it is triggered before the image has loaded.
a simple solution to that is to use
jQuery(window).load(function(){
your script here.......
})
instead of
jQuery(document).ready(function(){
your script here.........
})
this makes sure, that your scripts for that bit run only after everything (images) has successfully loaded
Hi guys, I don't know if any of you are active any more but I need help. I have no idea what I am doing, I have the same issue as Neue Wave, here's my blog; http://oluaidh.tumblr.com/
The posts are fine until a bit further down where they just overlay and no more posts are loaded. I've gone onto that link http://desandro.github.com/ but there are just loads of files that you can select and some are really long, i'm not sure what to use. I don't know where to put both of them (the desandro html and the one that ivancruz put up) in my HTML either.
Please help, thank you
I've posted the long script in both my description and HTML (I'm unsure of where to put it) and it still hasn't worked. I've changed my theme 100 times and they still over lap. I'm still unsure of what to do. Can someone help me please ?
http://onthejellicoeroad.tumblr.com/
I have this same problem. I'm just not sure how to modify the script. Could someone help me? My blog is http://trois-petits-mots.tumblr.com/
@courtneylane - They resolved the initial issue using the information on the plugin site: Unloaded Media Overlapping - JQuery Masonry
@andy_unleash Thank you but, I'm new to all this coding stuff so I'm not exactly sure what to do. If I give you my html, would you be able to add the right stuff?
@Courtneylane - Sure, I charge £50/hour for front end development.
Alternatively, give it a whirl, see how you get on - web development is all about making mistakes and problem solving.
Have a play around with the recommendations and details on the link I gave you - experimentation is the key to victory, just make sure to backup.
If you try, and fail, come back on here and let us know a specific problem you're running into with the solution.
You can also make a codepen with a stripped down version of what code you're using.
I made a handy guide on how to CodePen earlier if you're unsure - you can view it here
Could someone please send me the coding I need as I got infinte scroll then it all started overlapping this is my blog http://originalityisextinct.tumblr.com/
I've also been messing around for about an hour now with some of the "add into description" links but it overlaps constantly, as well as a column disappearing in the scrolled pages. Annoying :/ The problem seems to be that my original theme is in CSS... is this true? Even if I could extend the pages, mine are so short for some reason. .......Total coding newbie here.
roseprognosis.tumblr.com
So my code is updated, but eventually I still hit the overlapping problem. Mind you its after scrolling down though a couple of hundred images. But it still occurs though updating to the non-tumblr specific Infinite Scroll js did help prolong the problem farther down the page.
Any idea how else I can tweak my code to completely prevent this issue?
{block:IndexPage}
{block:IfInfiniteScroll} {/block:IfInfiniteScroll}
$(window).load(function () { $('.posts').masonry(), $('.masonryWrap').infinitescroll({ navSelector : "div.footer", // selector for the paged navigation (it will be hidden) nextSelector : ".footer a#nextpage", // selector for the NEXT link (to page 2) itemSelector : ".post", // selector for all items you'll retrieve bufferPx : 10000, extraScrollPx: 11000, loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", loadingText : "", doneText : "", }, // call masonry as a callback. function() { $('.posts').masonry({ appendedContent: $(this) }); } ); });{/block:IndexPage}
I think this is related as well. My site is shifting images when infinite scroll happens, and no videos after the scroll show. The site in http://conveniencetoconvene.tumblr.com. If anyone can help, it would be greatly appreciated!