Zurb Foundation Interchange not working, 'nodeName' undefined

Question

I'm trying to use interchange to change images based on the screen size.

However, when interchange is initialised no images load. Then when I resize the browser (1024px and lower) I get an error in the console saying:

Uncaught TypeError: Cannot read property 'nodeName' of undefined 

Which relates to line 47 of foundation.interchange.js, which is:

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 as per Zurb's documentation. I've made sure the images exist, which they do.

I'm using Foundation version 5.2.2.

Any ideas?

Answer 1

I had this issue and resolved it by doing some simple tests...

Try some of these:

1. Check - You are only calling one instance of the script path 'interchange.js'

Why? - This will ensure that you 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 check for it, especially if you're working in an MVC or nested webforms framework.

2. Check - $(document).foundation(); is 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 () {

        $(document).foundation();

     });
</script>

Why? - The interchange needs to exist already once foundation intializes I believe.

I hope these options help - sorry if it's a bit basic - but worth a try all the same Cheers