Divs are overlapping with Isotopes - javascript

Im using isotopes for my page and my divs that have images are overlapping.
This issue is only happening SOMETIMES the first time I access a page on my browswer and ALL the time on phone. It never happens when accessing the page locally though.
I already tried using .imagesLoaded but it doesn't seem to be working.
Any recommendations?
http://orianadesigns.com/4foodesses

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue.
You need to install imagesLoaded.js and then call isotope like this:
var $container = $('#container');
// init
$container.imagesLoaded( function(){
$container.isotope({
// options
itemSelector: '.box',
layoutMode: 'masonry'
});
});

Giving the images a fixed width/height solved this problem for me.

Related

Masonry Overlapping Tumblr Photosets

I have been attempting to create a Tumblr layout with 3 columns using Masonry and ImagesLoaded. However, I have issues with the photosets overlapping. I'm also using PXU Photoset.
Problem:
During the first seconds, the blog looks broken: http://s11.postimg.org/ry4fa614j/Overlapping.jpg
Then, it fixes into sorted columns: http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg
Also, the overlapping happens only with the photosets posts. Any other type of post (including those with only 1 image) work fine.
My Code:
So far, this is the code that works the best for me, but produces the problem I said before:
var $container = $('#threeCol');
$container.masonry({
itemSelector: ".post",
transitionDuration: 0
});
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '0px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'}, function () {
$container.imagesLoaded(function(){
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
},
function() {
$('#threeCol').masonry({
appendedContent: $(this)
});
});
}).resize();
$('.post img').imagesLoaded(function() {
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
}).resize();
});
});
});
In here, threeCol is my container and post is each individual post that I want to fit in the grid.
Also, I am not using InfiniteScroll.
Goal:
I would like for the content to load fast and not look broken on the first seconds of loading.
I have already tried:
Since I've been dealing with this problem for days, I have already attempted several things.
$(window).load(...);
This doesn't work at all with my current code. And when it works, it is extremely slow, and user-experience is bad.
Regarding other posts with solutions, I have tried a lot of them, including:
Masonry JS Overlapping Items
Tumblr Masonry with PXU Photoset Issue
Using masonry with imagesloaded
Masonry overlapping issue
Masonry Overlapping (Imbalance2 Bug)
And others on GitHub and links I can't find again.
Thanks for reading my question, and any help will be very welcome!
EDIT:
My question is different from several before, because my issues are photosets (which are groups of two or more images that go on the same post, therefore, are part of the same grid element) instead of individual images. I also do not know how many images are part of each photoset, and I do not know their sizes either.
Photosets are a type of post inside of Tumblr.

jQuery slice() and remove() then call jQuery isotope to rearrange layout

I am working on this site http://www.mtgmusic.no/
What i want there is to only show 25 posts and rearrange the whole post divs(.dcsns-li) by calling isotope again.
This is my code:
jQuery(window).load(function(){
var nPosts = jQuery(".dcsns-li").length;
console.log(nPosts);
var deletePost = nPosts - 25;
jQuery('body').find(".dcsns-li").slice(-nPosts,-deletePost).remove();
var $container = $('.stream');
$container.isotope({
// options
itemSelector: '.dcsns-li',
layoutMode: 'fitRows'
});
});
The problem with this code is i am getting an inconsistent alignment of those divs. Sometimes the divs are gathering on the left side, they are lining on the left(this occasionally happens, weird eh?)
I am also getting big gaps on those divs
Is there any way to fix this one or any work around?
Your help will be greatly appreciated!
Thanks! :)
to avoid gaps use masonry layout
$container.isotope({ layoutMode: 'masonry' });
see layout mode documentation

JQuery Isotope container height issue w/ iDangero.us Swiper

EDIT: The script is triggered and performing correctly when the window is being resized. Thanks a lot Сър Георги Демирев!
I've been pondering over a problem for a long while and I just can't seem to get a grip on it. On a photography portfolio site I use iDangero.us Swiper for a slideshow and JQuery Isotope for a thumbnail gallery.
Now, it works fine on Firefox and Chrome on Linux and Windows 7 alike.
However, on IE, Safari and Opera the grid items are showing in a vertical line, rather than a grid.
In order to locate the error I stripped the code from everything until I found out that Isotope stops this behaviour when I remove the Swiper part of the code.
The parent divs show to have 0 px height. Changing these to a fixed height (e.g. 1000px or 100%) doesn't change anything.
Here's the original site: http://anthron.octans.uberspace.de/meta.php
Here's a minimal example that still produces the error:
http://anthron.octans.uberspace.de/meta.debug.php
And the minimal source code: http://pastebin.com/H6t9bbNC
EDIT: Here's an implementation of Сър Георги Демирев's suggestion:
http://anthron.octans.uberspace.de/meta.debug.2.php
It works now, however the margin-right after the grid items are gone and return only after window resize. However one step further now.
I'm very grateful for any suggestion, I'm quite clueless about this one...
I had a similar problem recently and the fact that images are stacked one under another probably means that the script is not loading. However, if you resize the browser window a little bit, the script is triggered and images are places the way they should.
Wrap this code
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
in (document).ready function like this:
$(document).ready(function () {
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
});

jquery isotope plugin container height will not grow with isotope-item (same with masonry)

I have an isotope-item that will grow in height when somebody comments inside of it. When it grows, how do I tell the main isotope container to grow with it? Right now what is happening is, as the isotope-item grows, the isotope container maintains it's initial height that was set when calling $(".home_main").isotope(); So when I leave comments inside the isotope-item, the item grows, then is cut off by the main container. Thanks.
I have seen that you can set resizesContainer: true but this hasn't helped me. Thanks.
Not sure if it makes any difference but I have also tried this with the Masonry jquery plugin as well (seems pretty similar) and had the same problem.
Found the answer here:
https://github.com/desandro/isotope/issues/275
You have to call relayout like this:
$("#your_container").isotope( 'reLayout' )
In Isotope V2 the syntax is
$("#your_container").isotope('layout')
In Isotope PACKAGED v2.2.2, you can also 're-arrange / re-layout' your container:
$(window).scroll(function(){
$container.isotope( 'layout' );
}
In Isotope V3
$(window).on('load', function(){
var $container = $('#your_container');
$container.isotope({
itemSelector: '.item'
});
});
If your using the latest isotope, (not specified version but you can see the date of this comment) read the first link and include the appropriate couple of lines and include the library from the second link.
http://isotope.metafizzy.co/appendix.html
http://imagesloaded.desandro.com/

Masonry/Dynamic Slideshow Height Issues

I'm a little confused with the next steps to take on a project I'm working on and hopefully you could give me some ideas/help.
http://goo.gl/4d72h
I'm using Wordpress, and a combination of Portfolio Slideshow Pro (http://madebyraygun.com/wordpress/plugins/portfolio-slideshow-pro/) and Masonry (http://masonry.desandro.com/index.html) to create the landing page of this project.
As you can see by visiting the site, each 'post' is wrapped in a grid_6 float, allowing two floats per row, and then I am using masonry to place everything together as it does. I've wrapped the masonry code in a (window).load function to wait until all the featured images have loaded and then it starts the masonry. Pretty straightforward.
<script>
$(window).load(function(){
var $container = $('.masonry-cont-area');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.single-fg-post'
});
});
});
</script>
However, the masonry is only taking into consideration the first feature image for it's positioning etc. If you click the images, or the dots, it'll advance to the next image which can be longer or shorter in height, which is causing a few problems. Because the masonry has already taken place, it's overlaping with the next post etc. You can see what I mean when you click on the images on the link given above.
So, what I'm after today, is any ideas on how this can be fixed? Can masonry take the height from the tallest image in the slideshow? Can it changes dynamically as the images are clicked? Can I make sure that a margin at the bottom is ALWAYS given on absolute positioned items?
Any ideas would be really appreciated.
Thanks all,
Richard
You slideshow plugin does not seem to expose any event hooks. So you will have to do it the verbose way ..
Change the code where you initialize the masonry plugin to
$(window).load(function(){
var $container = $('.masonry-cont-area');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.single-fg-post',
isAnimated: true // added this line to make the resizing of the masonry animated and not instant..
});
// whenever we click on a bullet element
$('.pager').on('click','.bullet', function(){
// we use timeout to delay the redrawing of masonry
// because the slideshow takes sometime to fade out the current slide
// and slide in the new one..
// We have to wait until the slideshow has completed its transition before
// redrawing masonry, so that the masonry plugin can use the new slide's dimensions..
setTimeout(function(){
// we make masonry recalculate the element based on their current state.
$container.masonry();
}, 250); // 250 is the milliseconds of delay between the click to the bullet and the calling of the masonry redraw..
});
});
});
See it live at http://jsfiddle.net/XjVWN/embedded/result/
One thing you could do is to call .masonry('reload') when an image is changed.

Categories

Resources