Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
Solved by Amaury Hanser View solution
Hello World,
im pretty new to this stuff and i could need some help. Im trying to implement a masonry like gallery (colcade.js, same author) but its not working and i feel like its because of the template. I cant find a solution thats why im asking for help. It worked outside of grav in a simple html file.
Here is what ive done so far
gallery.html.twig
https://pastebin.com/U6DmAkhY
css
https://pastebin.com/c8ynYGx7
Thanks in advance
❤️
@Starguest, Would you mind sharing what "not working" means?
Javascript doesn't do its job
Hello,
When you open your dev tool console, do you see any error?
I'm asking because I wonder if:
<script>
var colcade = new Colcade( '.dz-grid', {
columns: '.dz-grid-col',
items: '.dz-grid-item'
});
</script>
Shoudln't be declared after you load colcade.js.
no errors
Sorry,
I was talking about the dev tool console of your browser.
F12 to open it on chrome or firefox, then click on the console tab.
Oh, found something.
ReferenceError: Colcade is not defined
Yep, so my guess was right.
You are adding colcade.js at line 13
{% block javascripts %}
{{ parent() }}
{% do assets.addJs('theme://js/colcade.js', {group:'bottom'}) %}
{% endblock %}
In your HTML, the group "bottom" is probably just before de body tag is closed.
But you are declaring a new Colcade in the head tag, line 19
<script>
var colcade = new Colcade( '.dz-grid', {
columns: '.dz-grid-col',
items: '.dz-grid-item'
});
</script>
Colcade is not loaded yet as your THML document is read from top to bottom.
You should either move where you declare your Colcade or where you load Colcade.js
Well, problem solved.
Thanks a lot 😘
Log in to reply.
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 4 | 193 | 2 months ago | ||
| 3 | 90 | 2 months ago | ||
| 11 | 449 | 3 months ago | ||
| 0 | 44 | 3 months ago | ||
| 5 | 123 | 3 months ago |