I'm trying to change the Masonry number of columns with a script in jQuery. This scripts reduce the max-width of Masonry container to force show only one column. The Script works almost fine, because I need to make double click to get my changes done. ¿Is it possible to make it with only one click?
This is my script:
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 24,
});
$(document).ready(function() {
$('.button-one').on('click', function() {
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 24,
});
$('.grid').css({'max-width': '600px'});
});
});
I have a Codepen demo with all the files:
Demo
One possible way to do this:
$('.button-one').on('click', function() {
$('.grid').css({'max-width': '600px'})
.masonry('layout');
});
Demo. See, you don't need to reinitialize the whole plugin: just command it to relayout the existing items with existing rules, based on the new dimensions of a grid container.
The way it stands, the plugin is first called again (making all the calculations using the existing style of a container), and only after that you change max-width of a grid. The second click works ok, as dimensions are already changed.
Just change width before grid masonry)
$('.grid').css({'max-width': '600px'});
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
gutter: 24,
});
Related
Here is the fiddle:
https://jsfiddle.net/qdhw0o3a/2/
I can't understand why all the items are being displayed on top of each other? Does it have something to do with the settings? I am just using the standard settings (as far as I can tell) which should produce behaviour similar to the website.
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
})
Try initiating the isotope after the window loads:
$(window).on('load', function() {
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
})
});
Note: Also, be on the lookout for Images Lazy-Loading in case your '.grid-item' contains images. This might interfere with isotope and make the elements come on top of each other.
you need to give the img and max-height and max-width.
see the updated Fiddle
I am using Isotope with Masonry layout and I noticed that sometimes leave the gaps between a box and the other (also if there is space to fit the other box).
but sometimes, if I refresh the page, it is ok and it fill all the gaps. (for this reason I don't think it is a problem of css)
I use fluid dimensions for the items and I have the sortBy: random mode.
I found that there is another script isotope-perfectmasonry, but it seems that works only with the old version of masonry (v1)
this is my code
var $grid = $('.grid').imagesLoaded( function() {
// init Isotope after all images have loaded
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',
sortBy : 'random',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
});
Is it possible fill all the gaps or it is impossible because it is random?
any idea how can i trigger a relayout if there are some gaps?
To avoid gaps, you should you use the packery layout mode of Isotope.
Here is a codepen demonstrating this.
The only differences are that the external javascript file for the packery layout is added (https://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js) and that the Isotope code is altered to what is below.
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'packery',
sortBy: 'random',
percentPosition: true,
packery: {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer'
}
});
DEMO
FULL Screen DEMO
Masonry is not filling small gaps even if there is space.
Example :
Main Container width : 896px;
beside the first container with the orange background, there is a gap where Masonry could add one more container (Orange BG 2nd container), which is not happening. I'm not sure where I'm wrong. :-(
You need to maximize the window to see the issue.
JS :
jQuery(window).load(function() {
/* var container = document.querySelector('.masonry-container');
var msnry = new Masonry(container, {
itemSelector: '.itemMas',
columnWidth: 15,
gutter: 1,
isFitWidth: true
});
*/
$ = jQuery;
var $container = $('.masonry-container').masonry();
var msnry;
$container.imagesLoaded( function(){
msnry = new Masonry( $container[0], {
itemSelector : '.itemMas',
isAnimated: true,
isFitWidth: true
});
})
});
Masonry will not change the order of the elements in the document. It simply packs elements left-to-right as tightly as it can.
If you need to pack items by rearranging their layout, you want to use another library, such as Isotope (made by the same author). It features a bin-packing mode in which items can be rearranged to fit gaps.
Thanks for reporting this issue. This is how Masonry works. It may leave gaps. You should look at Packery, which was specifically designed to fill gaps.
We can't figure our why there are large extra spaces in the Work section layout. Can anyone help?
http://new-had.herrmanneasyeditdemo.com/#work
To fix the loading issue with your div's showing before your images, you need to load your images using imagesLoaded. This prevents just the div's from showing before isotope is called. Since you are using isotope v1.56, not v2, it is included in that version of isotope. Change your custom.js (at line 107) isotope call to this:
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
resizable: false,
itemSelector : ".item",
masonry : {
columnWidth : 1,
gutterWidth: 1,
}
});
});
To fix your layout issue is more complicated since I'm not sure you can fit all your images in a seamless grid using isotope v1.56 and masonry ( most often you need to rearrange them for sizes to fit without white space). You would need to update to isotope v2 and load the packery layout option after isotope and then set your code up as so, for them to fit together.
var $container = $('#portfolio-container');
$container.imagesLoaded( function(){
$container.isotope({
layoutMode: 'packery',
itemSelector: '.item'
});
});
You will also have to change line 349:
$(window).resize(function(){
$('#portfolio-container').isotope('layout');
});
I have this issue with PXU Photoset Extended not loading properly when I use Masonry for my Tumblr Theme. I know what causes it, I just sadly have no clue how to fix it.
The only thing I found that reduced flickering while Masonry loaded, was to hide the container with CSS (display:none) and then unhide it when loading the Masonry script.
It seems this had the odd side-effect of the PXU Photoset script not rendering images properly (they're mostly cut off and they jump into their real size when resizing the window).
So I use this code to call Masonry, ImagesLoaded and Infinite Scroll:
$(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.show();
$container.masonry({
itemSelector: 'article',
gutter: 50,
isFitWidth: true,
});
});
$container.infinitescroll({
navSelector : '#pagination-infinite', // selector for the paged navigation
nextSelector : '#pagination-infinite a.next', // selector for the NEXT link (to page 2)
itemSelector : 'article', // selector for all items you'll retrieve
animate: true,
extraScrollPx: 310,
bufferPx: 40,
loading: {
msgText: '',
finishedMsg: '',
img: 'http://static.tumblr.com/amhdmud/iMBn235bd/1x1.png'
}
},
// 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
$container.masonry( 'appended', $newElems, true );
});
});
});
And then PXU Photoset Extended:
$(document).ready(function() {
$('.photo-slideshow').pxuPhotoset({
'rounded' : 'false', // corners, all or false
}, function() {
// Callback
});
});
The only thing that made the photosets display right involved removing the display: none; from the container, but then Masonry flickered out of the container on page load again, which I seem unable to fix any other way.
Any help is much appreciated,
Thank you.
The PXU Photoset plugin requires that photosets on the page be visible so that it can calculate the available area. Instead of using display: none; on the container try using visibility: hidden; and then change it to visibility: visible; after Masonry has finished.
Also, you'll want to make sure the Photoset plugin is running before Masonry makes its first pass over your theme.