Menu icon Foundation
Interchange inserts strange code when trying background implementation

Hello team!

Im using the following code in Foundation 5:

<div class="row completo" id="fondoTaller" data-interchange="[http://lafototeca.org/fototecaFoundation/img/talleres/Main-LuzyRetratoMedium.jpg, (default)], [http://lafototeca.org/fototecaFoundation/img/talleres/AleCartagena-Fondo.jpg, (large)]" style="width:100%;height: 75px;">
            

         

What is happening so far is that a second after I load the page, this appears inside the DIV:

Screen shot 2014 03 24 at 12.02.33 pm

I have verified the paths to the images, and replaced the URL with absolute paths, with no luck.

Any ideas?

interchangeFoundation 5

Hello team!

Im using the following code in Foundation 5:

<div class="row completo" id="fondoTaller" data-interchange="[http://lafototeca.org/fototecaFoundation/img/talleres/Main-LuzyRetratoMedium.jpg, (default)], [http://lafototeca.org/fototecaFoundation/img/talleres/AleCartagena-Fondo.jpg, (large)]" style="width:100%;height: 75px;">
            

         

What is happening so far is that a second after I load the page, this appears inside the DIV:

Screen shot 2014 03 24 at 12.02.33 pm

I have verified the paths to the images, and replaced the URL with absolute paths, with no luck.

Any ideas?


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

I checked out the page.

Could you please check your path to jQuery as there is a 404 error when getting it.

Wing-Hou Chan over 5 years ago

I checked out the page.

Could you please check your path to jQuery as there is a 404 error when getting it.

Wing-Hou Chan over 5 years ago

Hey Mauricio!

If you are trying to set a background image according to viewport size use CSS media queries:

div.completo
{
  background-image: url("http://lafototeca.org/fototecaFoundation/img/talleres/Main-LuzyRetratoMedium.jpg");
}
@media only screen and (min-width: 1025px)
{
  div.completo
  {
      background-image: url("http://lafototeca.org/fototecaFoundation/img/talleres/AleCartagena-Fondo.jpg");
  }
}

Wing-Hou Chan over 5 years ago

Yes, both images will be loaded however the appropriate CSS rule will only be applied once the viewport size satisfies the media query.

Also most browsers will render the page fast enough the user won't see the change.

However you can avoid this:

@media only screen and (max-width: 1024px)
{
  div.completo
  {
    background-image: url("http://lafototeca.org/fototecaFoundation/img/talleres/Main-LuzyRetratoMedium.jpg");
  }
}
@media only screen and (min-width: 1025px)
{
  div.completo
  {
      background-image: url("http://lafototeca.org/fototecaFoundation/img/talleres/AleCartagena-Fondo.jpg");
  }
}

Mauricio González over 5 years ago

Amazing!

So simple!

Thank you for your time. So simple it's shameful.

I wish you the best day tomorrow ;).

Mauricio González over 5 years ago

Interesting, thank you.

Im only applying this because it is in the docs:

"
Using Interchange with background-images

When you add a data-interchange attribute containing image paths (.jpg, .jpeg, .png, .gif, .bmp, .tiff), instead of replacing the element content it will set a background-image css property with the corresponding path.

<div data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]"></div>

"

It's here: http://foundation.zurb.com/docs/components/interchange.html

So I guess it CAN be done. What do you think? Do you see another problem?

Wing-Hou Chan over 5 years ago

Hey Mauricio!

Good point. I missed that in the Docs. Funny why it should happen so I will look into it.

However I will recommend using CSS for this. It is much more efficient and will work if JS is disabled in the browser.

Interchange exists because you want to manage elements that can't be managed with CSS.

Could you post a link to the site in development?

Mauricio González over 5 years ago

I agree.

The URL is http://lafototeca.org/fototecaFoundation/taller.html

Now, if I do it via CSS, both the large and the small image will load when in mobile, won't them?

That was the main reason i chose Interchange over queries.

Thank you for your help! ;)

Mauricio González over 5 years ago

Thanks.

I'm currently using that workaround on another place. Im leaving the URL I gave you untouched so you can take a look.

Ill post this on github, perhaps it's a bug.

Thank you again Wing-Hou