You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
HTML
48 lines
1.5 KiB
HTML
---
|
|
layout: default
|
|
title: Image based items
|
|
description: A demo of how NOT to use images with shuffle
|
|
extraJS: [ "demos/images.js"]
|
|
---
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>These images may be overlapping.</h2>
|
|
<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.</p>
|
|
<p><a href="{{ site.baseurl }}{% post_url 2013-05-03-images %}">Go to this images demo for a solutions</a>.</p>
|
|
<p>Shuffle will call <code>layout()</code> again once the window's <code>load</code> event fires to resolve this and other async assets (like fonts) which could affect the size of your items. Resizing the window would also fix it.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
.my-grid-with-images {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.my-grid-with-images .img-item {
|
|
margin-top: 10px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.my-grid-with-images .img-item img {
|
|
width: 100%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="my-grid-with-images row">
|
|
{% for item in site.data.items %}
|
|
<figure class="js-item img-item col-3@sm col-3@xs">
|
|
<img src="{{ item.images.small }}" srcset="{{ item.images.small }} 1x, {{ item.images.small-2x }} 2x" alt="{{ item.description }}" />
|
|
<figcaption>{{ item.title }}</figcaption>
|
|
</figure>
|
|
{% endfor %}
|
|
<div class="col-3@sm col-3@xs" id="js-sizer"></div>
|
|
</div>
|
|
</div>
|