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 );
});
}
);
Related
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 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.
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
});
});
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.
I have a script that loads elements after loading the images which are in. I want to first load the elements and than images. Can someone help me?
Script:
jQuery.ias({
container : '#con',
item: '.bo',
pagination: '.pages',
next: '.next',
loader: '<img src="loader.gif">',
onLoadItems: function(items) {
// hide new items while they are loading
var $newElems = $(items).show().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 });
$('#con').masonry( 'appended', $newElems, true );
});
return true;
}
});
add class to image you want to hide while it is loading:
load the element on the body the load your images:
<img src="image.jpg" class="preload" />
jQuery(document).ready(function(){
jQuery(".preload").hide();
// use : jQuery(".preload").css("opacity","0"); to preserve the image place!
jQuery(".preload").load(function(){
jQuery(this).show();
// Or jQuery(this).css("opacity","1");
})
});