Zurb Foundation Equalizer

Question

I'm trying to use this Foundation plugin: http://foundation.zurb.com/docs/components/equalizer.html

This is my code:

<div class="row" data-equalizer>
    <div class="large-4 medium-6 small-12 columns" data-equalizer-watch>
        {some content}
    </div>
    <div class="large-4 medium-6 small-12 columns" data-equalizer-watch>
        {some content}
    </div>
    <div class="large-4 medium-6 small-12 columns" data-equalizer-watch>
        {some content}
    </div>
</div>

I've then added before the end of my body the following scripts:

<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.datepicker.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>
<script>
    $(document).foundation();
</script>
</body>

The problem is just that Equalizer is not working.

All the .js are loaded correctly (no 404 errors), and Javascript Console is not throwing any kind of error. Everything seems to be just fine to me, where am I wrong? Thanks guys.

Answer 1

Either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins.

<script src="/js/foundation.min.js"></script>

<!-- or individually -->

<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>