3

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?

Arnab Nandy
  • 6,472
  • 5
  • 44
  • 50
Karl
  • 5,435
  • 11
  • 44
  • 70

1 Answers1

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.

  1. 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

Sam Malpass
  • 21
  • 3