Menu icon Foundation
Can't get Interchange to work - F6

Hello, I'm trying to test & deploy interchange on F6 for a background divs, but it's not clear at all on how to initialize the whole stuff - I mean I've followed the docs instructions (but maybe I did it wrong):

- Insert the scripts

bower_components/foundation-sites/js/foundation.interchange.js
bower_components/foundation-sites/js/foundation.util.mediaQuery.js
bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js

at the bottom, after the foundation.js and before the app.js - is this correct?

- included the a div with code

data-interchange="img/img-default.jpg, default], [img/img-small.jpg, small], [img/img-medium.jpg, medium], [img/img-large.jpg, large]"

and that's it - but it doesn't works...

Any clue?

interchange

Hello, I'm trying to test & deploy interchange on F6 for a background divs, but it's not clear at all on how to initialize the whole stuff - I mean I've followed the docs instructions (but maybe I did it wrong):

- Insert the scripts

bower_components/foundation-sites/js/foundation.interchange.js
bower_components/foundation-sites/js/foundation.util.mediaQuery.js
bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js

at the bottom, after the foundation.js and before the app.js - is this correct?

- included the a div with code

data-interchange="img/img-default.jpg, default], [img/img-small.jpg, small], [img/img-medium.jpg, medium], [img/img-large.jpg, large]"

and that's it - but it doesn't works...

Any clue?

Dayo over 3 years ago

Hi,

Your example appears to have a missing opening brace "[" and should be
data-interchange="[img/img-default.jpg, default] ... "

More importantly though, I don't think there is actually a separate "default" category to be defined and you should just have "small", "medium" and "large" as required.

Paolo Sax over 3 years ago

Hello Dayo, thanks for your reply.
Actually I've included the [default] because I've read this in some other forum (in order to find a solution and have interchange work); however, the missing "[" was beacuse I've unintentionally deleted it posting this thread in the forum, when I changed my original img path and included a shorter one, in order to make it more clear.

Anyway, also without the [default] part and double-checking all the brackets and stuff, still i can't get it work.

My doubt is about the whole js implementation in my files - I mean, I'm not sure if I've included all the js needed. This is what I got at the end of my page:

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/what-input/what-input.js"></script>
   <script src="bower_components/foundation-sites/dist/foundation.js"></script>
  <script src="bower_components/foundation-sites/js/foundation.interchange.js"></script>
  <script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script>
  <script src="bower_components/foundation-sites/js/foundation.util.timerAndImageLoader.js"></script>
  <script>
    var elem = new Foundation.Interchange(element);
  </script>
   <script src="js/app.js"></script>