We Keep Coding

How can I reload a script in infinite scroll

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
});

isotope + lazyload makes elements reloading on filtering

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

Why is my masonry not layout properly when it's loading images?

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 );
});
}
);

Masonry Hide Images until fully loaded

I am trying to hide my Masonry images until the page finished loading as currently the images load in a long strip to the left of the screen, before organising themselves.
I cannot seem to get the container to hide and then show once everything else has been loaded.
Here is the link: http://inspiredworx-labs.com/sites/blg/
Here is my snippet (with commented out code that I've tried to implement for the hide/show bit):
<script>
$(window).load( function(){
var $container = $('#masonry-container');
// initialize
$container.masonry({
//columnWidth: 60,
gutter: 6,
itemSelector: '.masonry-item'
});
})
/*
$('#masonry-container').hide();
$container.imagesLoaded(function(){
$('#masonry-container').show();
})
*/
</script>

You should include your Masonry instance within your images imagesLoaded like so:
var $container = $('#masonry-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.masonry-item',
gutter: 6
});
});

I do not getting whatever you have tried.
But there is a javascript library that is "imagesLoaded".
that will help you
I did it in this way
// created a array with image and data
var elemar = [];
$.each(data, function(j,subData){
var img = document.createElement('img');
img.src = 'images.jpg';
item.appendChild( img );
elemar.push(item);
});
// loading div after image loaded
imagesLoaded(elemar).on( 'progress', function( imgLoad, image ) {
var item = image.img.parentNode;
container.appendChild( item );// container is an javascript , $('#containerdiv'), where all div will be publish
msnry.appended( item ); // msnry intializaion
});
});

Isotope Jquery plugin layout issues

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.