Search code examples
javascriptjqueryzurb-foundationjquery-lazyload

Use jquery lazy load plugin with ZURB foundation data-interchange


Im working on a project using the ZURB foundation framework and its data-interchange method to provide different images for different screen sizes.

See: http://foundation.zurb.com/docs/components/interchange.html

and: http://www.appelsiini.net/projects/lazyload

Since the lazy load plugin depends on using 'data-original' to define the image path, zurb foundation interchange uses 'data-interchange'.

The ZURB foundation interchange method adresses images like this:

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

Lazy load adresses images like this:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

Question: How can i use 'data-interchange' instead of 'data-original' in lazy load? respectively: How is it possible to combine the zurb foundation interchange method with the lazy load plugin?

Thanks for your help!

Vin


Solution

  • The only solution I found for now is this one: Foundation Interchange + Lazy Loading