eyecandyzz
Registered Member
- Dec 24, 2012
- 74
- 36
I've been creating tumblr themes and I faced a problem with infinite scroll, so heres the situation. when the infinite scroll is activated the images overlaps each other, I've found the code that might affect it but not sure how to fix it, I would appreciate it if any of you can help me! thanks!
I know the correct way kinda look like this
but after hours and hours of trying I still cant get it to work... ;(
Code:
<script type="text/javascript">
$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').infinitescroll({
navSelector : "div#navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div#navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".box",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 11000,
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<script src="http://static.tumblr.com/3zmswwt/azQmiz6q7/finding_min_and_max_values_in_array_from.txt"></script>
<script src="http://static.tumblr.com/1s4z8hu/mYolo412c/jquery.infinitescroll.min.js"></script>I know the correct way kinda look like this
Code:
[COLOR=#FFFFFF][FONT=Menlo]<script>[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $(function(){[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] var $container = $('#content');[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] [/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $container.imagesLoaded( function(){[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $container.masonry({[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] itemSelector : '.feed',[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] isAnimated: true,[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] });[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] });[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] [/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $container.infinitescroll({[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] navSelector : '.navigation', // selector for the paged navigation [/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] nextSelector : '.nav-previous a', // selector for the NEXT link (to page 2)[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] itemSelector : '#content .feed', // selector for all items you'll retrieve[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] },[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] [/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] // call Masonry as a callback[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] function( newElements ) {[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] var $newElems = $( newElements ).css({ opacity: 0 });[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] // ensure that images load before adding to masonry layout[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $newElems.imagesLoaded(function(){[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] // show elems now they're ready[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $newElems.animate({ opacity: 1 });[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] $container.masonry( 'appended', $newElems, true ); [/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] });[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] }[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] );[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo] });[/FONT][/COLOR]
[COLOR=#FFFFFF][FONT=Menlo]</script>[/FONT][/COLOR]but after hours and hours of trying I still cant get it to work... ;(