dynamicweb/ungleich_page/templates/ungleich_page/ungleich/section_products.html

34 lines
1.3 KiB
HTML

{% load cms_tags custom_tags %}
<section id="{{section_id}}" class="products-section {% if product_instance.section_class %}{{ product_instance.section_class }}{% else %}bg-light-gray{% endif %}">
<div id="portfolio">
<div class="container">
<div class="text-center wow fadeInDown section-heading-contain">
<h2 class="section-heading">{{ product_instance.title }}</h2>
{{ product_instance.sub_title }}
</div>
<div class="row">
{% for plugin in product_instance.child_plugin_instances %}
<div class="col-md-4 col-sm-6 portfolio-item sameheight-{{product_instance.pk}} {% if product_instance.animate %}wow fadeInUp{%endif%}" data-wow-delay="{{ forloop.counter|multiply:0.25 }}s" style="visibility: visible; animation-delay: {{ forloop.counter|multiply:0.25 }}s; animation-name: fadeInUp;">
{% render_plugin plugin %}
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<script>
document.addEventListener("DOMContentLoaded", function() {
var equalizer = ".sameheight-{{product_instance.pk}}";
var elements = document.querySelectorAll(equalizer);
var heights = Array.from(elements).map(function(el) {
return el.offsetHeight;
});
var maxHeight = Math.max(...heights);
Array.from(elements).forEach(function(el) {
el.style.height = maxHeight + "px";
});
});
</script>