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
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.
- 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 () {
$(document).foundation();
});
</script>
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
source to share