Ask your WordPress questions! Pay money and get answers fast! (more info)

Masonry Spacing WordPress

  • REFUNDED

Hi, I am trying to make my masonry look like:
http://bit.ly/1MSWyC6 (in terms of grid layout)
I know it is not masonry but I want to know if it is possible to create the look of this.

Currently mine looks like:
http://bit.ly/1F1eMu5

here is the code:


/*
jQuery Masonry
*/
$(document).ready(function() {
$('#post-area').masonry({
itemSelector : '.post',
isResizable: true,
isFitWidth: true,
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false
}
});
})

Answers (1)

2015-04-06

zebra webdesigns answers:

Hello Emma

Do you just need the spacing between the items ??
in that case you need to add the
"gutter": 10


$(document).ready(function() {

$('#post-area').masonry({

itemSelector : '.post',

isResizable: true,

isFitWidth: true,

isAnimated: true,

animationOptions: {

duration: 400,

easing: 'linear',

queue: false,

gutter:10

}

});

})


that will add horizontal spacing


Emma comments:

Hi That didn't work unfortunately.


zebra webdesigns comments:

Hello Emma,
I sent PM to you.
there is error coming in the chrome console.

also if you are using jquery provided by wordpress then your code should be like.




jQuery(document).ready(function($) {

$('#post-area').masonry({
itemSelector : '.post',
isResizable: true,
isFitWidth: true,
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false,
gutter:10
}
});
});


I have attached the error in image file.


zebra webdesigns comments:

I put the gutter in wrong location my bad.

here is the correct code.

jQuery(document).ready(function($) {
$('#post-area').masonry({
itemSelector : '.post',
isResizable: true,
isFitWidth: true,
gutter:10,
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false,
}
});
});


Emma comments:

Hi, What is the error?


zebra webdesigns comments:

Hello Emma,

I see you have placed the below code.
columnWidth: 100
gutter:10

you have missed comma in between.
it should be like below.

$container.masonry({
itemSelector: '.post',
columnWidth: 100,
gutter:10

});


Emma comments:

Hi, Can you please chekc updated version. As you can see now the masonry shows in one line.


zebra webdesigns comments:

Hello Emma,

you have initiated the js masonry in two ways.
remove the class name js-msonry in the below area

<div id="post-area" class="js-masonry">

it should be like
<div id="post-area">

after this gutter will work properly.

here is the codepen demo
[[LINK href="http://codepen.io/anon/pen/YPbNJx"]]http://codepen.io/anon/pen/YPbNJx[[/LINK]]


Emma comments:

Hello, it still does not work?


zebra webdesigns comments:

in your function.js file you remove the columnwidth.
instead of following code

$(function() {
var $container = $('#post-area');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.post',
gutter:10,
});
});
});


replace it with

$(function() {
var $container = $('#post-area');
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 200,
itemSelector: '.post',
gutter: 10
});
});
});


dont change anything and paste it as such I gave and let me know.


Emma comments:

Hi I have adjusted the code. Now it shows in one line.


zebra webdesigns comments:

Ok Emma here is my final advise.

could you rename the post-area as some other name and pass it to function,

so that the existing styles can be ruled out if they are causing the issue.
Because in the codepen demo I gave it works with out any style.

If you need further advise on this then I might need FTP or you can share the screen via skype.
Skype ID: bhuvan530531

alternatively you can present your screen through teamviewer.


zebra webdesigns comments:

Hope its worked now :)