Using images with Shuffle

You can encounter problems when shuffle item dimensions depend on images. Like this demo. There are three good solutions to this.

  1. Set an explicit height on .shuffle-items like the basic demo.
  2. 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 that technique.
  3. Get notified when images load and call shuffleInstance.layout(). I recommend using Desandro's images loaded plugin to know when your images have finished loading.
  4. Do nothing and let your shuffle instance call layout() on the window's load event. This will the item layout to change on page load.
A deep blue lake sits in the middle of vast hills covered with evergreen trees
Lake Walchen
Looking down over one of the pillars of the Golden Gate Bridge to the roadside and water below
Golden Gate Bridge
A close, profile view of a crocodile looking directly into the camera
Crocodile
SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station
SpaceX
A multi-level highway stack interchange in Puxi, Shanghai
Crossroads
Dimly lit mountains give way to a starry night showing the Milky Way
Milky Way
NASA Satellite view of Earth
Earth
A close up of a turtle underwater
Turtle
Many trees stand alonside a hill which overlooks a pedestrian path, next to the ocean at Stanley Park in Vancouver, Canada
Stanley Park
An intrigued cat sits in grass next to a flag planted in front of it with an astronaut space kitty sticker on beige fabric.
Astronaut Cat
Pier 14 at night, looking towards downtown San Francisco's brightly lit buildings
San Francisco
Looking down on central park and the surrounding builds from the Rockefellar Center
Central Park

Setup

Maintaining aspect ratios

With two elements, you can create a box which will scale with the page. Here's an example:

A 2:1 box

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.

.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%;
}

Markup for each item

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 <figure> does not depend on the image.

<figure class="js-item img-item col-3@sm col-3@xs">
  <div class="aspect aspect--16x9">
    <div class="aspect__inner">
      <img src="/img/tennis-ball.png" alt="3D render of a tennis ball">
    </div>
  </div>
  <figcaption>wallpaper, 3d</figcaption>
</figure>

JavaScript used for this demo

Link to demo source