I have used npm install, i have done everything right (i think) but for some reason, the masonry javascript doesn't activate! The images stay as block elements. Hmm
@@codewithbubb Thank you for the response! I get this error: "app.js:1 Uncaught SyntaxError: Cannot use import statement outside a module" i think my app.js is in the wrong folder. I am also using MDbootstrap for this project, and my app.js is in the "js" folder. Perhaps i should move it somewhere else. In my node modules folder, masonry layout is indeed downloaded from the NPM install, so I know the files are there and ready for use, I just have something in the wrong place I think :)
@@guitarherozzz4009 Did you link the file in html as well? I was getting the same error but I acidently was linking masonry.js. However you need to go into dist then link masonry.js. Try linking this to html ""
Yeah, to be fair it's probably a bit outdated nowadays but I know it's still used quite a lot. I think with CSS improvements etc. it's probably more of a fallback.
It was an Emmet abbreviation e.g.: img[src="img/img$.jpg"]*10 ^^ Will generate 10 img tags with a src set to img/img1.jpg, img/img2.jpg ... etc (the dollar sign gets substituted for a number). I had to look it up before the video to be honest😄
Hi, I know you're unlikely to see this since you posted this a while ago. I am trying to build a gallery with multiple tabs that uses a masonry layout, using masonry.js and vue.js . The problem is that only the initial tab renders the masonry layout properly. What can I do to get the other tabs to work too? Thanks for the epic vid btw
Hey Jonathan, you might need to re-render the grid for each tab (i'm not sure how Vue.js handles tabbed content or what your specific setup is). I'd take a look at the method Masonry has as a starting point: masonry.desandro.com/methods.html Hope that helps.
Sure, just download the files (or use a CDN for Masonry) and then open up the HTML file directly in your browser. If you've downloaded the files just make sure the path to them is relative to the HTML file you're using.
You just showed me what I needed! Thank you so much, I love quick and simple tutorials!
Cheers! Glad you found it useful 😊
thanks, man! all very clear and simple... learned more in your 5 minutes than in some other videos of hour length))
Hey Alexey, thanks for your feedback. Glad you enjoyed it 😀
Thanks for the great introduction!
You’re welcome!
Thank You So Much
You're welcome - glad you found it helpful.
I have used npm install, i have done everything right (i think) but for some reason, the masonry javascript doesn't activate! The images stay as block elements. Hmm
Are you getting any errors in your console?
@@codewithbubb Thank you for the response! I get this error: "app.js:1 Uncaught SyntaxError: Cannot use import statement outside a module" i think my app.js is in the wrong folder. I am also using MDbootstrap for this project, and my app.js is in the "js" folder. Perhaps i should move it somewhere else. In my node modules folder, masonry layout is indeed downloaded from the NPM install, so I know the files are there and ready for use, I just have something in the wrong place I think :)
@@codewithbubb I tried putting the app.js in a different folder but I still get "Uncaught SyntaxError: Cannot use import statement outside a module"
@@codewithbubb Tried for hours, no results :(
@@guitarherozzz4009 Did you link the file in html as well? I was getting the same error but I acidently was linking masonry.js. However you need to go into dist then link masonry.js. Try linking this to html ""
Thank you so much, it helped me a lot
You're welcome - Masonry is quite cool if you have some content you want to fill a page with.
I have always wanted to try out Masonry but never had the time to do so😂
Yeah, to be fair it's probably a bit outdated nowadays but I know it's still used quite a lot. I think with CSS improvements etc. it's probably more of a fallback.
How did you import all the images with one line of code?
It was an Emmet abbreviation e.g.:
img[src="img/img$.jpg"]*10
^^ Will generate 10 img tags with a src set to img/img1.jpg, img/img2.jpg ... etc (the dollar sign gets substituted for a number).
I had to look it up before the video to be honest😄
Hi, I know you're unlikely to see this since you posted this a while ago. I am trying to build a gallery with multiple tabs that uses a masonry layout, using masonry.js and vue.js . The problem is that only the initial tab renders the masonry layout properly. What can I do to get the other tabs to work too? Thanks for the epic vid btw
Hey Jonathan, you might need to re-render the grid for each tab (i'm not sure how Vue.js handles tabbed content or what your specific setup is).
I'd take a look at the method Masonry has as a starting point: masonry.desandro.com/methods.html
Hope that helps.
good day please how can i add this to a vue js 3 project
How can I center it?
when i reload page, masonry dont work :(
Do you get any errors?
Can't we run this without using the localhost?? What if want to use without localhost?
Sure, just download the files (or use a CDN for Masonry) and then open up the HTML file directly in your browser.
If you've downloaded the files just make sure the path to them is relative to the HTML file you're using.
@@codewithbubb really thanks sir!!. It's working!
You’re welcome 😀
Quite useful! :)
Glad you think so!
1:05 yo wtf xD I would have manually done that and taken 10mins
Seems to be nice...if you have at least 431.92 Grid-Children 😁
That's true! I think it's a bit overkill for smaller collections of elements and there's probably easier ways of doing it with CSS nowadays.
@@codewithbubb Yes. But still nice that it exists. You never know when you may need it 😁