Foundation-sites: Interchange does not work on img & div

[chanwhab]

Interchange at foundation 6.2.3 does not work on img and div
Console shows "Uncaught ReferenceError: We're sorry, 'interchange' is not an available method for this element."
Same DOM works on foundation 5.

How can we reproduce this bug?

1. Set up the required dom structure, and js libraries.
2. Check console

What did you expect to happen?
Change when you resize browser

What happened instead?
Nothing at all. No image, no change on DOM.

Test case:
Foundation 5 working example:
Foundation 6 Not working example

[Deckluhm]

Multiple issues here.

First, as described in the Javascript section of the Foundation 6 documentation, reflow from Foundation 5 is now replaced by reInit in Foundation 6:

• Adding Plugins After Page Load
  
• Adding Content to Plugins
  

But actually you don't need to reInit anything here, since you don't inject HTML content after page load.

Another issue is your interchange syntax:

• Foundation 5: [https://website.com/image_small.jpg, (small)]
• Foundation 6: [https://website.com/image_small.jpg, small] (note that there is no parentheses)

Your last error is that you are using Foundation 5 CSS with Foundation 6 JS.

Here is a working CodePen: https://codepen.io/anon/pen/qNKXGV

[chanwhab]

I must be blind or something that i didnt see the parentheses syntax update. Now everything is good. However the syntax is really strict that:

[https://website.com/image_small.jpg, small] is okay but
[https://website.com/image_small.jpg,small] is not okay.

Thanks anyway

[ltmail]

Hi currently i am using data-interchange for images on different breakpoints,
issue is when i am not giving any image source to small screen(tablet),
and when i am resizing the window from tablet to desktop or tablet to mobile i am getting source unknown for desktop and mobile in-spite of having images for both the breakpoints
could anyone help me out in resolving the issue.