1

I'm trying to use Foundation's Interchange plugin to dynamically load multiple images based on screen size. I've used it successfully before, but I'm having trouble now for some reason.

This is the interchange code I'm using

<img data-interchange="[/library/images/homepage/img_medical_mobile@2x.jpg, (default)],[/library/images/homepage/img_medical@2x.jpg, (medium)]" />

This is the result, as you can see the image isn't loading at all. The image tag itself does not exist in the markup.

enter image description here

When I resize the window down past medium, I get this error:

 Uncaught TypeError: Cannot read property 'nodeName' of undefined

I looked through other questions, like this one so I tried both of those solutions. I made sure there were not multiple interchange includes, made sure foundation was initialized after the foundation scripts were loaded using a document.ready(), and made sure that the CSS was loaded before the javascript files, because I read that was also an issue.

I'm not sure what other information might be helpful, so please ask any questions and if I can, I can provide more information.

Thanks in advance :)

Community
  • 1
  • 1
Syren
  • 1,961
  • 2
  • 15
  • 19

0 Answers0