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

Is there a way to center an image using Isotope Filter Plugin?

So I have this issue (pictures below) of images in portfolio not being in the center when certain width is reached. I'm using bootstrap and so the pictures are in div "col-sm-6 col-md-4". When screen is md, or sm it's perfectly fine and centered(partly, there is still an imperfection when md-4, but it's not that important), yet when it reaches width of exactly 536px it snaps on left and leaves gap on right. What I have found is that this code is responsible for all this nonsense. If i delete this and add css margin: 0 auto on class img-responsive, pictures look as it should, however if I leave Isotope Filter js command issue still persists. Any suggestions?
$(window).load(function() {
var $container = $('.portfolio-items');
$container.isotope({
filter: '*'
});
$('.cat a').click(function() {
$('.cat .active').removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
Wrong
Right

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