-4

I have a masonry to show my portfolio but when I load the page in the min width browser (like 400 pixels width) the images are overlayed, I have to resize the browser and then they accommodate.

Im using 3 js I downloaded from internet masonry main isotope.pkgd

the Site

mkrieger1
  • 10,793
  • 4
  • 39
  • 47
user3430043
  • 79
  • 8
  • Please share the code if you are stuck somewhere then someone can help. The question is quite incomplete but all I can say is that you forgot the initialize the masonry that's why its' only working when the resize event occurred. Try to read the documentation and ask the question when you are stuck with something which is not available. – Rahul Gandhi Apr 29 '18 at 23:11
  • Dear, I appreciate very much your help. This is the code that activates the masonry, maybe I'm missing something... `$(window).load( function() { $('#container').masonry({ "itemSelector": ".item", "columnWidth": ".grid-sizer", }); }); ` – user3430043 May 01 '18 at 05:56
  • I did the same code in a plain html and it is working, I start thinking that the problem is not the js but the html.... – user3430043 May 01 '18 at 06:02

2 Answers2

0

Make sure you initialize the masonry properly as the code is only working when some event occurred (resize event in your case).

Masonry works on a container grid element with a group of child items.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

Initialize with jQuery

You can use Masonry as a jQuery plugin: $('selector').masonry().

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

Source: https://masonry.desandro.com/

Edit: Please make sure you are passing strings (in the options) if you want to use a selector as the masonry code will only run document.querySelector for a string.enter image description here

Otherwise, the value is used as it is.

Rahul Gandhi
  • 922
  • 10
  • 19
  • Dear many thanks for your response. I double checked and the Js is correct, the only problem is that works only when resizing and not when the page has loaded. – user3430043 May 01 '18 at 18:15
  • There was an syntax error, the js code is like this but is overlapping anyway when the page loads, `$(window).load( function() { $('#container').masonry({ itemSelector: .item, columnWidth: .grid-sizer }); });` – user3430043 May 01 '18 at 20:39
  • In the above code, make sure you are passing `.item` and `.grid-sizer` as strings because the masonry expects a string there. Let me update the answer with the code. – Rahul Gandhi May 01 '18 at 22:11
  • Dear many thanks for your response but please let me remind you that I'm really new in js. Do you think that mansonry is not working when it loads because of that? Can you give me a more detailed advise? Many thanks in advance. – user3430043 May 02 '18 at 02:53
  • Please create a codepen or jsfiddle link to explain the problem descriptively if possible. – Rahul Gandhi May 02 '18 at 09:11
  • Dear please find the link to de jsfiddle. https://jsfiddle.net/cbt9bc8L/ – user3430043 May 02 '18 at 15:48
  • Once again, I can see that in the code you shared, the options object is not passed with the strings. `$('#container').masonry({ itemSelector: "item", columnWidth: ".grid-sizer" }); ` It should be like this. Also, the images are not loaded in the fiddle. I can't see any jquery/masonry. – Rahul Gandhi May 02 '18 at 16:21
  • Can you please tell me how to pass with strings the object? my code is `$(window).load( function() { $('#container').masonry({ itemSelector: .item, columnWidth: .grid-sizer }); });` Im not very good with jsfiddle sorry. – user3430043 May 02 '18 at 17:02
  • Dear, in the developers tool I can figure out that when I load the page over 1200 px it works ok but in a less resolution the images are overlapped. I can see that in the class "isotope" there is not a value for the height and in the item class all the values are in 0. I do not understand why not working in less than 1200px. Thanks in advance. – user3430043 May 02 '18 at 18:35
  • Please fix the jsFiddle so that someone can help you. ( Images doesn't load. Use absolute URL instead of relative). – Rahul Gandhi May 03 '18 at 08:55
0

I have found the solution. First of all it wasn't a Masonry but a Isotope. I was using wrong the JS. I Contact the developer and he told me to use this function imagesloaded

mkrieger1
  • 10,793
  • 4
  • 39
  • 47
user3430043
  • 79
  • 8