How can I pass schema variables to JavaScript in justifiedGallery?

Technical Q&A
1

I’m using justifiedGallery and my javascript call looks like this:

$(‘.gallery-container’).justifiedGallery({
rowHeight : 200,
margins : 30
});

How do I pass variables from my schema to the rowHeight and margins values?

I’ve really tried but I just can’t discover the right syntax!

2

I got there in the end.

It seems that the liquify variables must applied outside the {{ javascript }} section. Setting the following after the section html did the trick:

{%- assign row_height = section.settings.row_height -%}
{%- assign spacing = section.settings.spacing -%}

Then I was able to use rwhgt and spcng in the {{ javascript }} section like this:

{% javascript %}
$(‘.gallery-container’).justifiedGallery({
lastRow : ‘center’,
rowHeight : rwhgt,
margins : spcng
}).on(‘jg.complete’, function () {
$(‘.image-popup’).magnificPopup({
type:‘image’,
gallery:{enabled: true}
});
});
{% endjavascript %}

Maybe this will help others who at the limits of their knowledge like me!

1 Like