Firstly, I don't know if I'm using the rights words to describe this situation. Secondly, I don't know how to code js so I will try to describe this thing as best as I can. I'm basically making a tumblr theme with masonry and infinite scroll. I'm using the latest version of both masonry and infinite scroll. Both of them work perfectly as well. The thing is, all the posts appended through infinite scroll don't seem like the initial posts. I use these codes to unnest blockquotes and tweak the photosets:
// Unnest
$('.post').unnest({
yourCaption: ".caption, .text_body",
wrapName: ".tumblr_parent",
newCaptionUsername: true,
originalPostCaptionUsername: false,
tumblrAvatars: true,
tumblrAvatarClass: ".tumblr_avatar",
usernameColon: false
});
// For legacy photosets
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '3px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
// For NPF photosets
var npfOptions = {
includeCommonPhotosets: false,
photosetMargins:"3"
}
npfPhotosets(".post", npfOptions);
The posts appended through infinite scroll don't seem to be affected by these codes at all. Here's the code for masonry and infinite scroll that I use:
var $grid = $('#posts').masonry({
itemSelector: '.post',
columnWidth: 1
});
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
// get Masonry instance
let msnry = $grid.data('masonry');
// init Infinite Scroll
$grid.infiniteScroll({
// Infinite Scroll options...
append: '.post',
path: '.next_page',
outlayer: msnry
});
What should I do to make this work?
As pointed out in the comments, your initial functions should be called after every time new stuff is added to the page. You can do so by using the event provided by infinite-scroll, as follows:
var infiniteGrid = $grid.infiniteScroll({
// Infinite Scroll options...
append: '.post',
path: '.next_page',
outlayer: msnry
});
infiniteGrid.on( 'append.infiniteScroll', function( event, response, path, items ) {
// do your thing with the new items here
});
Related
I'm implement in my project packery + Infinite scroll 3, but when I scroll the page, and new items are loaded, these do not respect packery.
var grid = document.querySelector('.masonry_base');
var pckry = new Packery( grid, {
itemSelector: '.post-grid',
percentPosition: true
});
// layout Packery after each image loads
imagesLoaded( grid ).on( 'progress', function() {
pckry.layout();
msnry.options.itemSelector = '.post-grid';
});
var elem = document.querySelector('.masonry_base');
var infScroll = new InfiniteScroll( elem, {
// options
path: '.next',
append: '.post-grid',
history: false,
});
How do I make sure that every time new items are loaded through infinite load, imagesLoaded load packery to align the divs?
Here are two screenshots, this is my situation before loading other items and after loading
The plugins are working well, on loading the default filter. The problem is when changing to another filter (using isotope) becouse the elements are showing well, but when scrolling, the elements are reloading, cousing a flash for any of them.
My js code is:
var $win = $(window);
var $container = $('.PortfolioItemContainer'),
$containerProxy = $container.clone().empty().css({ visibility: 'hidden' });
var $items = $('.PortfolioItemContainer .bgCover');
$items.lazyload({
effect: "fadeIn",
effectspeed: 1500,
failure_limit: Math.max($items.length - 1, 0)
});
var grid = $('.PortfolioItemContainer').isotope({
resizable: false,
filter: '.all',
masonry: { columnWidth: Math.floor( $('.PortfolioItemContainer').width() / 4)},
onLayout: function() {
$win.trigger("scroll");
}
});
Screenshot on scrolling. Sometimes are re-loaded(flashing) 2,3, 4,.. elements
Any solutions are welcome
A similar example is here:
http://jsfiddle.net/ZnEhn/255/
Click on any other filter and scroll. The result is: some elements loaded from 'all' are shown, and new elements are now loaded so couse that random flashing
I'm using masonry layout by desandro and It's working fine. Though when it's loading the images, the layout is out. It rearranges itself after all images are loaded but all stack up together when loading.
Flickr seems to be the one that I'm aiming for the layout. On flickr photostream, the tiles are already layout with gray colored background and it loads its images there directly. How can I achieve something like this?
Here's the script that I'm using:
var $container = $('#wall');
$container.imagesLoaded(function(){
$container.masonry({
"columnWidth": ".grid-sizer",
"gutter": ".gutter-sizer",
"itemSelector" : '.item'
});
});
It's important to note also that I'm using infinite loading by Paul on a WordPress theme that I'm implementing for my blog.
$container.infinitescroll({
navSelector : '.pagination ', // selector for the paged navigation
nextSelector : '.next.page-numbers', // selector for the NEXT link (to page 2)
itemSelector : '.item', // selector for all items you'll retrieve
loading: {
msg: null,
msgText: "<small>loading content...",
finishedMsg: "<small>End of line.</small>",
speed: 'fast',
img: 'http://i.imgur.com/Ky3zbSs.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 am trying to use fullpage.js for two different sections on one website. Basically, when a slide is clicked on, it reveals a child wrapper div underneath with its own sections to vertically scroll through before the main section continues on.
Here is my code that I am working with. I'm trying to load it in through ajax but I'm wondering if there is an easier way I am overlooking.
$("#wrapper").fullpage({
verticalCentered: true,
resize : true,
anchors: ['section1', 'section2', 'section3', 'about'],
//menu:'#menu',
customScroll:true,
onLeave: function(index, nextIndex, direction){
//console.log(index+'|'+nextIndex+'|'+direction);
if (direction == 'down'){
$('.section:nth-child('+index+')').animate({'top':'0%'},0)
$('.section:nth-child('+nextIndex+')').animate({'top':'100%'},0).animate({'top':'0%'},500);
} else {
$('.section:nth-child('+nextIndex+')').animate({'top':'0%'},0);
$('.section:nth-child('+index+')').animate({'top':'0%'},0).animate({'top':'100%'},500).animate({'top':'500%'},0);
}
}
});
and then the code that removes it and adds a new wrapper:
$(".sub_section").click(function() {
$("#wrapper").fullpage.destroy('all');
if (sub_section_open == false) {
$("#left_border").animate({"borderLeftWidth" : "0px"}, 300);
$("#right_border").animate({"borderRightWidth" : "0px"}, 300);
$("#top_border").animate({"borderTopWidth" : "0px"}, 300, function() {
$("#left_border").hide();
$("#right_border").hide();
$("#top_border").hide();
});
$(".sub_section .letters").slideUp("slow", function(){
$(".sub_section .content").css({'z-index': 1});
});
sub_section_open = true;
$(".btn_sub_section_close").show();
$( "#wrapper" ).load( "section1.html" );
$("#section1").fullpage({
verticalCentered: true,
resize : true,
anchors: ['ssection1', 'ssection2', 'ssection3', 'ssection4'],
menu:'#menu'
});
}
});
Any ideas? Thanks!
fullpage.js only supports one instance.
It is a fullpage plugin and it is not made to support them as it doesn't make sense. It is full page, all the page will be part of one instance of fullpage.
You can easily see evidences of it in the code, for example in this line:
$('.fp-section').each(function(index){
Any section on the page, no matter which container/wrapper it uses, will be treated inside one single instance of fullpage.
On GitHub, Fullpage.js has labeled the issue as enhancement. So there is a chance we get the multiple instances option in a future version :)
i am trying to set up isotope on this site, it needs to handle the layout and i need to be able to append items to the container.
The issue is that it does not seem to initialize the images properly, here is how i init it:
$(document).ready(function(){
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 400,
gutterWidth: 10
},
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: true
},
resizesContainer: true,
});
load_more();
});
The images are completly unaffected by the masonry options, and if i specify "Width" in my CSS i have loading issues.
load_more preforms an ajax call and on success it calls this function with the data returned:
function data_loaded(data) {
var newItems = "";
for (var i = 0; i < data['posts'].length; i++) {
newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
}
/* append images*/
var $newItemsObj = $(newItems);
$('#container').isotope( 'insert', $newItemsObj );
}
The site is http://www.hotchinesebabes.com/
The site is safe for work, there are no nude images
It also seems like the site needs a refresh to load properly, i guess the images get catched the second time, so it fails the first time due to triggering isotope prior to image load ?
Isotope will not work because your images haven't loaded yet, so the width and height of images are 0. Use https://github.com/desandro/imagesloaded or fix the height and width of your images with CSS.