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