Masonry Hide Images until fully loaded - javascript

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

Related

Overlapping elements with Packery and Infinite Scroll 3

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

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

Adding scroll loop to masonry gallery in wordpress

I'm trying to modify the WP-Canvas Gallery plugin to endlessly repeat the images in the gallery it is showing when the user scrolls down to the end of the page. The gallery is located at http://www.armijostudio.com.
I have VERY limited knowledge of JavaScript, but here's what I've tried:
In the code, I've found the place where the gallery is created:
var initGallery = function() {
$('.gallery-masonry').each( function() {
var $container = $(this);
var $posts = $container.children('.gallery-item');
$posts.hide();
// keeps the media elements from calculating for the full width of the post
runMasonry(0, $container, $posts);
// we are going to append masonry items as the images load
$container.wcGalleryMasonryImagesReveal( $posts );
$(window).resize(function() {
runMasonry(0, $container, $posts);
});
});
Before the closing bracket, I've tried re-running initGallery when the page is scrolled to the bottom and the following:
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
var $container = $(this);
var $posts = $container.children('.gallery-item');
$posts.hide();
// keeps the media elements from calculating for the full width of the post
runMasonry(0, $container, $posts);
// we are going to append masonry items as the images load
$container.wcGalleryMasonryImagesReveal( $posts );
$(window).resize(function() {
runMasonry(0, $container, $posts);
});
}
});
But it doesn't work.
Any ideas?
Thank you all in advance!

Masonry Center when colums are too large and leave a gap on the right

I am new to javascript. I really only know html css and adding masonry to my new tumblr theme was a challenge I wanted to undergo and it is proving to be just that: a challenge.
my example page: Example
You can see that if the columns cannot fill the whole page then a large gap will be on the right of the masonry grid. What I want is to have that grid center according to the width of the window size if that gap exists.
I have tried hacking this with css using auto margins on .masonry and on .entry masonry-brick and no luck.
I figured this might be something fixed in javascript/jquery but I'm too new to it.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js">
</script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#posts');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.entry',
});
});
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
columnWidth: 250,
itemSelector: '.entry'
});
$container.infinitescroll({
itemSelector : ".entry",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
Here is all of the code (the code was copy and pasted from a theme developer who was opening this for other developers).
Thanks in advance for anybody's help.

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.

Categories