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.
77 lines
2.8 KiB
HTML
77 lines
2.8 KiB
HTML
---
|
|
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 %}
|