Masonry Overlapping Tumblr Photosets - javascript

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.

Related

Divs are overlapping with Isotopes

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.

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

Isotope v2 filtering with Infinite Scroll - Filter not finding all items and Window not resizing on filter

Head's up!
There's a pending feature-request issue on Isotope's GitHub repo that you should add a "👍" reaction to if you're interested in seeing official docs and demos for this (how to combine Isotope, Infinite Scroll, filtering, and sorting). It was opened by Isotope's creator to gauge interest. If interested, please upvote!
**TL;DR: To help get official docs and demos for this, go here and add a "👍" reaction.**
Trying to piece together a filterable layout using the Isotope JS plugin and Paul Irish's (sadly unmaintained) Infinite Scroll plugin.
Filtering is somewhat working. Initially it filters the page 1 content. For it to filter items not on page 1 I need to scroll down (I suppose this is bringing the elements in the browser's memory, thus making it available to the filtering script?)
via a set of select boxes for the initial page content (ie: the content on page 1).
Question 1:
How to get the filter to work for all page items? ie: How to reference all elements in the filter script, even those not yet brought onto the page via infinite scroll?
Question 2:
Once I have scrolled down and all the elements are filterable, the window does not resize on filtering. so when there are only one or two elements shown via the filter, it's still possible to scroll way down the page (even though no elements are shown). Upon inspection of these elements, I see that they're still in the DOM.
Filtering Script
function filterTags(){
isotopeInit();
var $checkboxes = $('#tag-wrap input')
$checkboxes.change(function(){
var arr = [];
$checkboxes.filter(':checked').each(function(){
var $dataToFilter = $(this).attr('data-filter');
arr.push( $dataToFilter );
});
arr = arr.join(', ');
$container.isotope({ filter: arr });
});
};
Isotope Init
function isotopeInit(){
var $container = $('.post-excerpts').imagesLoaded( function() {
$container.isotope({
itemSelector: '.post-excerpt-block-wrap',
layoutMode: 'masonry',
animationEngine: "best-available",
masonry: {
columnWidth: '.post-excerpt-block-wrap'
},
transitionDuration: '2.0',
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
});
});
};
Infinite Scroll Init
$container.infinitescroll({
loading: {
finished: undefined,
finishedMsg: "<em>No more posts to load.</em>",
img: "http://www.infinite-scroll.com/loading.gif",
msg: null,
msgText: "<em>Loading the next set of posts...</em>",
selector: '.infinite-loader',
speed: 'fast',
start: undefined
},
binder: $(window),
//pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
//bufferPx: Math.round($(window).height() * 0.9),
nextSelector: "a.older-posts",
navSelector: "nav.pagination",
contentSelector: ".content",
itemSelector: ".post-excerpt-block-wrap",
maxPage: {{pagination.pages}},
appendCallback: true
},
// Callback for initializing scripts to added post excerpts
function(newElements) {
var $newElems = $( newElements );
loadImages();
checkForFeatured();
makeFontResponsive();
addReadMoreLinks();
fitVidInit();
$newElems.imagesLoaded(function(){
$container.isotope( 'appended', $newElems );
});
}
);
Any ideas, suggestions, or other insights are incredibly welcomed. Many thanks in advance.
##Update:
Regarding Questions 2: Seems the problem is related to how Isotope is being told to filter the items. Specifically, this code from the isotope init function:
transitionDuration: '2.0',
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
I've tried changing it to the following, though this removes the completely from the DOM (fixing the spacing issue) and they're not returned into the DOM upon "unfiltering" them. So it's not a solution:
hiddenStyle: {
display: 'none'
},
visibleStyle: {
display: 'visible',
transform: 'scale(1)'
}
I've also tried simply removing these config lines altogether, which seems like the obvious "clean" solution, but this too still leaves lots of white space on the page upon filtering. Not sure whether the problem here is with my Isotope or Infinite Scroll implementation.
For question 2, one thing you could do is applying the display:none style to all hidden elements (and remove from all the visible ones) after isotope filtering.
I think you should be able to use the "on layoutComplete" event listener of isotope to apply it at the right time, like this:
$container.isotope( 'on', 'layoutComplete',
function( isoInstance, laidOutItems ) {
$('.my-elements-class.hiddenStyle').addClass('reallyHiddenStyle');
$('.my-elements-class.visibleStyle').removeClass('reallyHiddenStyle');
}
);
Where, of course, the elements you want to filter are of css class my-elements-class, you applied isotope filtering to $container and you define
reallyHiddenStyle: {
display: 'none'
}
in your CSS.
For question 1, perhaps you need to use a similar strategy with infinitescrolling callback, adding new elements to the filter once they appear because of scrolling.
You already have the callback passed as last parameter of the infinitescroll method, so at a quick look it seems that something like this might work:
$container.isotope('destroy');
$.each(newElements, function (i, el){/** add new elements to arr */});
$container.isotope({ filter: arr });
Do you have a working example you can share? So that I can check it out, if you'd like me to.

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

Using corner-stamp with the isFitWidth option in Masonry

Does anyone know how to use the corner-stamp with the "isFitWidth" option in Masonry? The items don't arrange themselves properly when the window is resized back.
$('#container').masonry({
itemSelector: '.span1BoxWrapper',
cornerStampSelector: '.corner-stamp',
columnWidth: 322,
isAnimated: !Modernizr.csstransitions,
//isRTL: true
isFitWidth: true
});
Any help will be greatly appreciated.
I found that with cornerstamp and isfitwidth the masonry layout did not reload when I initially resized the window, leaving “bricks” out of place. If I moved the window size slightly it would then reload, but this bugged me. To fix this I just added a timer that reloads masonry every 50ms. Probably not efficient code but it fixes the bug until someone figures it out in a more elegant way.
window.onload = function () {
setInterval(function(){
$(“#container”).masonry(‘reload’);
},50);
...
...
}

Categories

Resources