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.
70 lines
1.7 KiB
HTML
70 lines
1.7 KiB
HTML
---
|
|
layout: default
|
|
title: Using Shuffle with Requirejs
|
|
description: A simple example of how you can use Shuffle with an AMD loader like RequireJS.
|
|
image: /demos/requirejs.jpg
|
|
extraJS: []
|
|
prism: false
|
|
shuffle: false
|
|
pagejs: false
|
|
---
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>RequireJS!</h2>
|
|
<p>
|
|
Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like <a href="https://requirejs.org">RequireJS</a>. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the <a href="{{ site.baseurl }}/js/require-main.js">config file</a> used on this page.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
.shuffle-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
#grid .img-item {
|
|
margin-top: 16px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#grid .img-item img {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div class="container shuffle-wrap">
|
|
<div id="grid" class="my-shuffle-container row">
|
|
{% for item in site.data.items %}
|
|
<figure class="js-item img-item col-3@sm col-3@xs">
|
|
<div class="aspect aspect--16x9">
|
|
<div class="aspect__inner">
|
|
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
|
|
</div>
|
|
</div>
|
|
<figcaption>{{ item.groups }}</figcaption>
|
|
</figure>
|
|
{% endfor %}
|
|
<div class="col-3@sm col-3@xs" id="js-sizer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h2>Shuffle.js</h2>
|
|
<p>{{ site.longDescription }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
{% include credit-jake.html %}
|
|
|
|
|
|
<script data-main="{{ site.baseurl }}/js/require-main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
|