Add AMD support. Add RequireJS demo. Ref #15
parent
60e156d274
commit
ea30d642bb
@ -0,0 +1,67 @@
|
||||
---
|
||||
layout: default
|
||||
title: Using Shuffle with Requirejs
|
||||
description: TODO
|
||||
image: /demos/requirejs.jpg
|
||||
extraJS: []
|
||||
prism: false
|
||||
shuffle: false
|
||||
jquery: false
|
||||
pagejs: false
|
||||
---
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2>RequireJS!</h2>
|
||||
<p>
|
||||
Shuffle is compatible with AMD loaders like <a href="http://requirejs.org">RequireJS</a>.
|
||||
You can take a peek at the <a href="/js/require-main.js">config file</a> used on this page.
|
||||
Just remember, Shuffle needs Modernizr to work!
|
||||
I also don't recommend using the "jquery.shuffle.modernizr.js" file with RequireJS because Modernizr doesn't have an AMD defintion block.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.shuffle-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#grid .img-item {
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#grid .img-item img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid shuffle-wrap">
|
||||
<div id="grid" class="shuffle--container row-fluid">
|
||||
{% for item in site.items %}
|
||||
<figure class="js-item img-item span3 m-span3">
|
||||
<div class="keep-ratio four-three">
|
||||
<div class="keep-ratio-inner">
|
||||
<img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>{{ item.groups }}</figcaption>
|
||||
</figure>
|
||||
{% endfor %}
|
||||
<div class="span3 m-span3" id="js-sizer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="container-fluid">
|
||||
<h2>Shuffle.js</h2>
|
||||
<p>{{ site.longDescription }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{% include credit-jake.html %}
|
||||
|
||||
|
||||
<script data-main="/js/require-main.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,51 @@
|
||||
requirejs.config({
|
||||
baseUrl: '/js',
|
||||
paths: {
|
||||
jquery: '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min',
|
||||
shuffle: '../dist/jquery.shuffle',
|
||||
modernizr: '../dist/modernizr.custom.min'
|
||||
},
|
||||
|
||||
|
||||
// Shimming other page javascript.
|
||||
shim: {
|
||||
evenheights: {
|
||||
deps: ['jquery'],
|
||||
exports: 'jQuery.fn.evenHeights'
|
||||
},
|
||||
page: {
|
||||
deps: ['jquery', 'evenheights'],
|
||||
exports: 'Modules'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// A hack for Modernizr and AMD. This lets Modernizr be in the <head> and also
|
||||
// compatible with other modules.
|
||||
define('modernizr', [], window.Modernizr);
|
||||
|
||||
|
||||
define(function(require) {
|
||||
// Get jQuery.
|
||||
var $ = require('jquery');
|
||||
|
||||
// Get Shuffle.
|
||||
var Shuffle = require('shuffle');
|
||||
|
||||
// Page-level JavaScript used for the demo pages.
|
||||
var jqEvenHeights = require('evenheights');
|
||||
var Page = require('page');
|
||||
|
||||
// Create a new shuffle instance.
|
||||
var shuffle = new Shuffle($('#grid'), {
|
||||
itemSelector: '.js-item',
|
||||
sizer: $('#js-sizer')
|
||||
});
|
||||
|
||||
// DO NOT use this for determining when images load.
|
||||
// See http://vestride.github.io/Shuffle/images/
|
||||
// Use something like imagesLoaded.
|
||||
$('#grid img').on('load', function() {
|
||||
shuffle.layout();
|
||||
});
|
||||
});
|
@ -1,3 +1,9 @@
|
||||
(function($, Modernizr, undefined) {
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery', 'modernizr'], factory);
|
||||
} else {
|
||||
factory(window.$, window.Modernizr);
|
||||
}
|
||||
})(function($, Modernizr, undefined) {
|
||||
|
||||
'use strict';
|
||||
|
@ -1 +1 @@
|
||||
})(jQuery, Modernizr);
|
||||
});
|
||||
|
Loading…
Reference in New Issue