Zurb Foundation Interchange not working, 'nodeName' is undefined

I am trying to use swap to resize images based on screen size.

However, when the exchange is initialized, images are loaded. Then when I resize the browser (1024px and below) I get an error in the console:

Uncaught TypeError: Cannot read property 'nodeName' of undefined 


Which refers to line 47 of the .interchange.js foundation, which:

if (/IMG/.test(el[0].nodeName)) {


The code I'm trying to use is:

<img data-interchange="[http://www.example.com/image.png, (default)], [http://www.exmaple.com/image-large.png, (large)]" />


This is completely standard according to the Zurb documentation. I made sure the images exist, what they do.

I am using Foundation version 5.2.2.

Any ideas?


source to share

1 answer

I ran into this problem and resolved it by doing some simple tests ...

Try a few of them:

  • Checking. You are only calling one instance of script path 'interchange.js'

Why? - This will avoid duplicate function calls within the plugin.

How? - Ctrl-f (find) the word "interchange.js" on the view source page

This is the best way to test it, especially if you are working in MVC or nested webforms framework.

  1. Check - $ (document) .foundation (); called after the interchange.js script has loaded

eg. IN THIS ORDER ....

<script src="/foundation/foundation.js")></script>
<script src="/foundation/foundation.interchange.js"></script>

<script type="text/javascript">
    $(document).ready(function () {




Why? - Change must exist after I believe that the integration of the foundation.

I hope these options help - sorry if it's a little basic - but worth trying anyway Greetings



All Articles