description: A Shuffle.js demo using Desandro's imagesLoaded plugin. This comes in very handy when using shuffle with images affect the layout of shuffle items
title: Using images with Shuffle
description: A Shuffle.js demo using aspect ratios to set the size of images.
<p>You can encounter problems when shuffle item dimensions depend on images. <ahref="{{ site.baseurl }}{% post_url 2013-06-29-image-problems %}">Like this demo</a>. There are three good solutions to this.</p>
<ol>
<li>Set an explicit height on <code>.shuffle-item</code>s like the <ahref="{{ site.baseurl }}{% post_url 2013-05-01-basic %}">basic demo</a>.</li>
<li>Similar to number 1, make the height of the image container a percentage of the width. This can be seen in the nav images above with the <code>div.keep-ratio</code>.</li>
<li>Get notified when images load (this page). In this case, I'm using <ahref="http://desandro.github.io/imagesloaded/">Desandro's images loaded plugin</a>. Please note that imagesloaded does not support IE7.</li>
<li>Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses this technique.</li>
<li>Get notified when images load and call <code>myShuffleInstance.layout()</code>. I recommend using <ahref="http://desandro.github.io/imagesloaded/">Desandro's images loaded plugin</a> to know when your images have finished loading.</li>
<p>With this knowledge, you can force an image to fit inside this box and, when the image loads, it will not change the size of the box.</p>
<divclass="code-block">
<prerel="CSS"><codeclass="language-css">.aspect {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.aspect__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* Add more aspect ratios here */
.aspect--16x9 {
padding-bottom: 56.25%;
}</code></pre>
</div>
</div>
<divclass="col-12@sm">
<h3>Markup for each item</h3>
<p>The most important thing here is that the images are wrapped in two other elements which define its size. This means that the size of the <code><figure></code> does not depend on the image.</p>
description: A demo of how NOT to use images with shuffle
extraJS: [ "demos/images-broken.js"]
extraJS: [ "demos/images.js"]
---
<divclass="container">
<h2>This probably looks broken.</h2>
<p>Demo in which shuffle item dimensions are based on images without a fix. <ahref="{{ site.baseurl }}{% post_url 2013-05-03-images %}">See here</a> for a solution.</p>
<p>In this demo, the height of each item in the grid depends on the image. If Shuffle is initialized before the images load, the heights it calculates will be incorrect. <ahref="{{ site.baseurl }}{% post_url 2013-05-03-images %}">See here</a> for a solution.</p>
Glen Cheney
8 years ago