Menu icon Foundation
Equalizer + Interchange = Not friends

I'm trying to use 'equalizer' on a block grid that contains images that load based on whether a device has retina display (using 'interchange' to do this). My code looks something like this:

<ul class="small-block-grid-2" data-equalizer>
    <li data-equalizer-watch>
        <h1>Image 1</h1>
        <img data-interchange="[http://placehold.it/200x150, (default)], [http://placehold.it/400x300, (retina)]" alt="" />
        <noscript>
           <img src="http://placehold.it/200x150" alt="" />
        </noscript>
    </li>
     <li data-equalizer-watch>
        <h1>Image 2</h1>
        <img data-interchange="[http://placehold.it/200x150, (default)], [http://placehold.it/400x300, (retina)]" alt="" />
        <noscript>
           <img src="http://placehold.it/200x150" alt="" />
        </noscript>
    </li>
</ul>

However, my image appears to be loaded only after equalizer has determined the height of my container (giving the container a height without taking into account the image height).

Is this a bug in Foundation? Any suggestions on a workaround?

Here is an example of the issue: http://jsfiddle.net/f8Snu/1/

FoundationEqualizerinterchangeblock-grid

I'm trying to use 'equalizer' on a block grid that contains images that load based on whether a device has retina display (using 'interchange' to do this). My code looks something like this:

<ul class="small-block-grid-2" data-equalizer>
    <li data-equalizer-watch>
        <h1>Image 1</h1>
        <img data-interchange="[http://placehold.it/200x150, (default)], [http://placehold.it/400x300, (retina)]" alt="" />
        <noscript>
           <img src="http://placehold.it/200x150" alt="" />
        </noscript>
    </li>
     <li data-equalizer-watch>
        <h1>Image 2</h1>
        <img data-interchange="[http://placehold.it/200x150, (default)], [http://placehold.it/400x300, (retina)]" alt="" />
        <noscript>
           <img src="http://placehold.it/200x150" alt="" />
        </noscript>
    </li>
</ul>

However, my image appears to be loaded only after equalizer has determined the height of my container (giving the container a height without taking into account the image height).

Is this a bug in Foundation? Any suggestions on a workaround?

Here is an example of the issue: http://jsfiddle.net/f8Snu/1/

Wing-Hou Chan over 5 years ago

Hey Adam!

This subject seems to generate a lot of threads. Check out this thread for a solution: http://foundation.zurb.com/forum/posts/13340-equalizer-container-too-short-image-height-not-observed

Adam D over 5 years ago

Thanks Wing-Hou! I guess I should have done a bit more research before posting... ;)

Wing-Hou Chan over 5 years ago

No problem! :D