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);
...
...
}
Related
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.
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.
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},
});
});
});
I am trying to build a horizontal version of JQuery Masonry using JQuery Isotope. I want my result to look something like this:
Layout-modes (CLICK THE masonryHorizontal OPTION).
As per the sites instructions:
Masonry Horizontal
my script looks like:
$('#isotopecontainer').isotope({
itemSelector : '.item',
masonry : {
columnWidth : 270
}
});
However, 2 things are happening:
1) when the page loads the height of the #isotopecontainer div is set at 60px so you only see the tops of the .item divs.
2) if you resize the browser the #isotopecontainer div expands but the .item divs do not line up like the example.
Can anyone help point me in the right direction at all? My demo site is here.
Thanks.
You're demo site is working in Firefox.
Although, you're right, in Chrome it's not. The problem is fairly simple. You need to set width and height attributes on your images. Or else, Chrome load them as 0px height (which made container with default height of line-height value) until they get the file. Firefox isn't acting this way and waits for knowing the images size before creating the layout.
Hope this help!
You need to add layoutMode: 'masonryHorizontal' or else it won't work. Like this:
$('#isotopecontainer').isotope({
itemSelector : '.item',
layoutMode: 'masonryHorizontal',
masonry : {
columnWidth : 270
}
});
#isotophecontainer has overflow: hidden. Removing this shows all of the images for me in Chrome.
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.