---
layout: default
title: Using images with imagesloaded.js
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
image: /demos/images.jpg
extraJS: [ "imagesloaded.pkgd.js", "demos/images.js"]
prism: true
---

<div class="container">
  <h2>Images!</h2>
  <p>You can encounter problems when shuffle item dimensions depend on images. <a href="{{ 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 <a href="{{ 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 <a href="http://desandro.github.io/imagesloaded/">Desandro's images loaded plugin</a>. Please note that imagesloaded does not support IE7.</li>
  </ol>
</div>


<style>
  .shuffle-wrap {
    position: relative;
  }

  .shuffle--images {
    position: relative;
    visibility: hidden;
  }

  .shuffle--images.images-loaded {
    visibility: visible;
  }

  .shuffle--images .img-item {
    margin-top: 10px;
    margin-left: 0;
  }

  .shuffle--images .img-item img {
    width: 100%;
  }

  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
  }

</style>

<div class="container shuffle-wrap">
  <img id="loader" class="loader" alt="Loading..." src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAzMDAgMzAwIgogICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIj4KICA8cGF0aCBkPSJNIDE1MCwwCiAgICAgICAgICAgYSAxNTAsMTUwIDAgMCwxIDEwNi4wNjYsMjU2LjA2NgogICAgICAgICAgIGwgLTM1LjM1NSwtMzUuMzU1CiAgICAgICAgICAgYSAtMTAwLC0xMDAgMCAwLDAgLTcwLjcxMSwtMTcwLjcxMSB6IgogICAgICAgIGZpbGw9IiMzZDdmZTYiPgogICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiCiAgICAgICAgICAgdHlwZT0icm90YXRlIiBmcm9tPSIwIDE1MCAxNTAiIHRvPSIzNjAgMTUwIDE1MCIKICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMXMiIGZpbGw9ImZyZWV6ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgPC9wYXRoPgo8L3N2Zz4K" />
  <div class="shuffle--images row">
    {% for item in site.items %}
    <figure class="js-item img-item col-3@sm col-3@xs">
      <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
      <figcaption>{{ item.groups }}</figcaption>
    </figure>
    {% endfor %}
    <div class="col-3@sm col-3@xs" id="js-sizer"></div>
  </div>
</div>


<section>
  <div class="container">
    <h2>Shuffle.js</h2>
    <p>{{ site.longDescription }}</p>
  </div>
</section>


{% include credit-jake.html %}