Removed CSS dependency, updated Modernizr

Removed shuffle.css and set styles with JavaScript.
Updated to Modernizr 2.5.3 custom build.
Updated README.
pull/56/head
Glen Cheeny 12 years ago
parent 9fe65db48c
commit 368397a0a5

@ -1,4 +1,4 @@
# [jQuery Shuffle Plugin] (http://vestride.github.com/Shuffle)
# [jQuery Shuffle Plugin](http://vestride.github.com/Shuffle)
## Features
@ -8,15 +8,22 @@
## How to Use
Settings you can change (these are the defaults)
```js
var options = {
'itemWidth' : 230, // Width of the grid item
'margins' : 20, // right and bottom margins
'key' : 'all' // Which category to show
itemWidth : 230, // Width of the grid item
marginTop : 20, // Top margin
marginRight: 20, // Right margin
key : 'all' // Which category to show
speed : 800, // Speed of the transition (in milliseconds). 800 = .8 seconds
easing : 'ease-out' // css easing function to use
};
$('#grid').shuffle(options);
```
The easing function is one of `default`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, or `cubic-bezier`.
### The HTML
The html structure. The only real important thing here is the 'data-key' attribute. It has to be a [valid JSON](http://jsonlint.com/) array of strings.
@ -54,7 +61,7 @@ Say you have this markup
```html
<ul class="filter-options">
<li class="active" data-key="all">Most Recent</li>
<li data-key="all" class="active">Most Recent</li>
<li data-key="wallpaper">Wallpapers</li>
<li data-key="graphics">Graphic Design</li>
<li data-key="photography">Photography</li>
@ -68,7 +75,7 @@ And when you click on a li, you want the plugin to shuffle (you need to call the
$(document).ready(function(){
// Set up button clicks
$('.filter-options li').click(function() {
$('.filter-options li').on('click', function() {
var $this = $(this),
$grid = $('#grid');
@ -80,59 +87,18 @@ $(document).ready(function(){
$grid.shuffle('shuffle', $this.attr('data-key'));
});
var options = {
'itemWidth' : 230, // Width of the grid item
'margins' : 20, // right and bottom margins
'key' : 'all' // Which category to show
};
// instantiate the plugin
$('#grid').shuffle(options);
$('#grid').shuffle({
itemWidth : 230,
marginTop : 20,
marginRight: 20,
key : 'all',
speed : 800,
easing : 'ease-out'
});
});
```
## The CSS
This is all that's in `shuffle.css`.
```css
#grid {
position: relative;
-moz-transition: height 0.8s ease-out;
-o-transition: height 0.8s ease-out;
-webkit-transition: height 0.8s ease-out;
-ms-transition: height 0.8s ease-out;
transition: height 0.8s ease-out;
}
#grid .item {
position: relative;
-moz-transition: -moz-transform 0.8s ease-out, opacity 0.8s ease-out;
-o-transition: -o-transform 0.8s ease-out, opacity 0.8s ease-out;
-webkit-transition: -webkit-transform 0.8s ease-out, opacity 0.8s ease-out;
-ms-transition: -ms-transform 0.8s ease-out, opacity 0.8s ease-out;
transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
#grid .item.filtered {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
#grid .item.concealed {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#grid .item:nth-child(4n) {
margin-right: 0;
}
```
## Dependencies
* jQuery
@ -151,8 +117,12 @@ This is all that's in `shuffle.css`.
_Browsers that don't support CSS transitions and transforms *cough* IE <= 9 *cough* will see a less cool, javascript based version of the effect._
## Changes
* 7.3.12 - Removed dependency on the css file and now apply the css with javascript. Updated Modernizr to 2.5.3.
## Links
* [Github repo] (https://github.com/Vestride/Shuffle)
* [Github repo](https://github.com/Vestride/Shuffle)
* [Inspired by Isotope](http://isotope.metafizzy.co/)
* [Me] (http://glencheney.com)
* [Me](http://glencheney.com)

@ -1,64 +1,100 @@
// IMPORTANT!
// If you're already using Modernizr, delete it from this file. If you don't know what Modernizr is, leave it :)
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes
*/
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["&shy;","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms=function(){return!!B(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C("transitionProperty")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document);
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&#173;","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e});var G=function(a,c){var d=a.join(""),f=c.length;w(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join("")],[,"csstransforms3d"]);q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},q.csstransitions=function(){return F("transition")};for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));return z(""),i=k=null,e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document);
/**
* jQuery Shuffle Plugin
* Uses CSS Transforms to filter down a grid of items (degrades to jQuery's animate).
* Inspired by Isotope http://isotope.metafizzy.co/
* Copyright (c) 2011 Glen Cheney cheney [dot] glen [at] gmail [dot] com http://glencheney.com
* @author Glen Cheney
* @version 1.2
* @date 12/31/11
*
* Use it for whatever you want!
* @author Glen Cheney (http://glencheney.com)
* @version 1.3
* @date 7/3/12
*/
(function($) {
var methods = {
;(function($, Modernizr) {
"use strict";
var supported = Modernizr.csstransforms || Modernizr.csstransitions,
methods = {
init : function(options) {
// Customizable options
var settings = {
'itemWidth' : 230,
'margins' : 20,
'key' : 'all'
itemWidth : 230,
marginTop : 20,
marginRight: 20,
key : 'all',
speed : 800,
easing : 'ease-out'
};
if (options) {
$.extend(settings, options);
}
settings.itemCss = {
position: 'absolute',
opacity: 1, // Everything after this is for jQuery fallback
top: 0,
left: 0,
marginTop: settings.marginTop,
marginRight: settings.marginRight,
float: 'left'
};
return this.each(function() {
var $this = $(this),
$items = $this.children(),
itemsPerRow = Math.floor($this.width() / settings.itemWidth),
numRows = 2,
itemHeight = $items.first().outerHeight(),
data;
data,
transition = Modernizr.prefixed('transition'),
transform = methods.getPrefixed('transform');
// Set up css for transitions
$this.css('position', 'relative').get(0).style[transition] = 'height ' + settings.speed + 'ms ' + settings.easing;
$items.each(function(index) {
var defaults = settings.itemCss;
// Set CSS transition for transforms and opacity
if (supported) {
this.style[transition] = transform + ' ' + settings.speed + 'ms ' + settings.easing + ', opacity ' + settings.speed + 'ms ' + settings.easing;
}
// Set the margin-right to zero for the last item in the row
if ((index + 1) % itemsPerRow === 0) {
defaults.marginRight = 0;
}
$(this).css(settings.itemCss);
});
data = {
'$items' : $items,
'itemsPerRow' : itemsPerRow,
'numRows' : numRows,
'itemHeight' : itemHeight,
'itemWidth' : settings.itemWidth,
'margins' : settings.margins
$items : $items,
itemsPerRow : itemsPerRow,
itemHeight : itemHeight,
itemWidth : settings.itemWidth,
marginTop : settings.marginTop,
marginRight : settings.marginRight,
settings : settings
};
// Save our settings for recall
$this.data('shuffle', data);
// Disabled CSS Animations if we're going to use jQuery to animate
if (!Modernizr.csstransforms || !Modernizr.csstransitions) {
methods.setPrefixedCss($items, 'transition', 'none');
}
// Do it
methods.shuffle.call(this, 'all');
});
},
/**
* The magic. This is what makes the plugin 'shuffle'
*/
shuffle : function(category) {
var $this = $(this),
data = $this.data('shuffle'),
@ -74,7 +110,7 @@
if (!category) category = 'all';
// Hide/show appropriate items
if (category == 'all') {
if (category === 'all') {
data.$items.removeClass('concealed');
} else {
data.$items.removeClass('concealed filtered').each(function() {
@ -87,6 +123,7 @@
});
}
// How many filtered elements?
numElements = data.$items.not('.concealed').addClass('filtered').length;
// Shrink each concealed item
@ -96,11 +133,14 @@
methods.filter.call(this);
// Adjust the height of the grid
gridHeight = (Math.ceil(numElements / data.itemsPerRow) * (data.itemHeight + data.margins)) - data.margins;
gridHeight = (Math.ceil(numElements / data.itemsPerRow) * (data.itemHeight + data.marginTop)) - data.marginTop;
$this.css('height', gridHeight + 'px');
},
/**
* Hides the elements that don't match our filter
*/
shrink : function() {
var $concealed = $(this).find('.concealed');
if ($concealed.length === 0) {
@ -108,8 +148,8 @@
}
$concealed.each(function() {
var $this = $(this),
x = parseInt($this.attr('data-x')),
y = parseInt($this.attr('data-y')),
x = parseInt($this.attr('data-x'), 10),
y = parseInt($this.attr('data-y'), 10),
data = $this.parent().data('shuffle');
if (!x) x = 0;
@ -129,17 +169,22 @@
});
},
/**
* Loops through each item that should be shown
* Calculates the x and y position and then tranitions it
*/
filter : function() {
var y = 0, $filtered = $(this).find('.filtered');
$filtered.each(function(index) {
var $this = $(this),
data = $this.parent().data('shuffle'),
x = (index % data.itemsPerRow) * (data.itemWidth + data.margins),
row = Math.floor(index / data.itemsPerRow)
x = (index % data.itemsPerRow) * (data.itemWidth + data.marginRight),
row = Math.floor(index / data.itemsPerRow);
if (index % data.itemsPerRow == 0) {
y = row * (data.itemHeight + data.margins);
if (index % data.itemsPerRow === 0) {
y = row * (data.itemHeight + data.marginTop);
}
// Save data for shrink
@ -160,14 +205,22 @@
},
/**
* Uses Modernizr's testAllProps (aka prefixed()) to get the correct
* vendor property name and sets it using jQuery .css()
* Uses Modernizr's prefixed() to get the correct vendor property name and sets it using jQuery .css()
* @param {jq} $el the jquery object to set the css on
* @param {string} prop the property to set (e.g. 'transition')
* @param {string} value the value of the prop
*/
setPrefixedCss : function($el, prop, value) {
$el.css(Modernizr.testAllProps(prop, 'pfx'), value);
$el.css(Modernizr.prefixed(prop), value);
},
/**
* Returns things like -webkit-transition or -moz-box-sizing
* @param {string} property to be prefixed.
* @return {string} the prefixed css property
*/
getPrefixed : function(prop) {
return Modernizr.prefixed(prop).replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
},
/**
@ -187,7 +240,7 @@
transition: function(opts) {
var transform;
// Use CSS Transforms if we have them
if (Modernizr.csstransforms && Modernizr.csstransitions) {
if (supported) {
if (Modernizr.csstransforms3d) {
transform = 'translate3d(' + opts.x + 'px, ' + opts.y + 'px, 0px) scale3d(' + opts.scale + ', ' + opts.scale + ', ' + opts.scale + ')';
} else {
@ -195,6 +248,7 @@
}
// Update css to trigger CSS Animation
opts.$this.css('opacity' , opts.opacity);
methods.setPrefixedCss(opts.$this, 'transform', transform);
} else {
// Use jQuery to animate left/top
@ -209,6 +263,7 @@
}
};
// Plugin definition
$.fn.shuffle = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
@ -219,4 +274,4 @@
return false;
}
};
})(jQuery);
})(jQuery, Modernizr);

@ -1,18 +1,18 @@
// IMPORTANT!
// If you're already using Modernizr, delete it from this file. If you don't know what Modernizr is, leave it :)
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes
*/
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["&shy;","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms=function(){return!!B(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C("transitionProperty")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document);
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&#173;","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e});var G=function(a,c){var d=a.join(""),f=c.length;w(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join("")],[,"csstransforms3d"]);q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},q.csstransitions=function(){return F("transition")};for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));return z(""),i=k=null,e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document);
/**
* jQuery Shuffle Plugin
* Uses CSS Transforms to filter down a grid of items (degrades to jQuery's animate).
* Inspired by Isotope http://isotope.metafizzy.co/
* Copyright (c) 2011 Glen Cheney cheney [dot] glen [at] gmail [dot] com http://glencheney.com
* @author Glen Cheney
* @version 1.2
* @date 12.15.11
* Use it for whatever you want!
* @author Glen Cheney (http://glencheney.com)
* @version 1.3
* @date 7/3/12
*/
(function(a){var b={init:function(c){var d={itemWidth:230,margins:20,key:"all"};if(c){a.extend(d,c)}return this.each(function(){var c=a(this),e=c.children(),f=Math.floor(c.width()/d.itemWidth),g=2,h=e.first().outerHeight(),i;i={$items:e,itemsPerRow:f,numRows:g,itemHeight:h,itemWidth:d.itemWidth,margins:d.margins};c.data("shuffle",i);if(!Modernizr.csstransforms||!Modernizr.csstransitions){b.setPrefixedCss(e,"transition","none")}b.shuffle.call(this,"all")})},shuffle:function(c){var d=a(this),e=d.data("shuffle"),f,g;if(!e){b.init.call(this);e=a(this).data("shuffle")}if(!c)c="all";if(c=="all"){e.$items.removeClass("concealed")}else{e.$items.removeClass("concealed filtered").each(function(){var b=a(this).attr("data-key"),d=a.parseJSON(b);if(a.inArray(c,d)===-1){a(this).addClass("concealed");return}})}f=e.$items.not(".concealed").addClass("filtered").length;b.shrink.call(this);b.filter.call(this);g=Math.ceil(f/e.itemsPerRow)*(e.itemHeight+e.margins)-e.margins;d.css("height",g+"px")},shrink:function(){var c=a(this).find(".concealed");if(c.length===0){return}c.each(function(){var c=a(this),d=parseInt(c.attr("data-x")),e=parseInt(c.attr("data-y")),f=c.parent().data("shuffle");if(!d)d=0;if(!e)e=0;b.transition({$this:c,x:d,y:e,left:d+f.itemWidth/2+"px",top:e+f.itemHeight/2+"px",scale:.001,opacity:0,height:"0px",width:"0px"})})},filter:function(){var c=0,d=a(this).find(".filtered");d.each(function(d){var e=a(this),f=e.parent().data("shuffle"),g=d%f.itemsPerRow*(f.itemWidth+f.margins),h=Math.floor(d/f.itemsPerRow);if(d%f.itemsPerRow==0){c=h*(f.itemHeight+f.margins)}e.attr({"data-x":g,"data-y":c});b.transition({$this:e,x:g,y:c,left:g+"px",top:c+"px",scale:1,opacity:1,height:f.itemHeight+"px",width:f.itemWidth+"px"})})},setPrefixedCss:function(a,b,c){a.css(Modernizr.testAllProps(b,"pfx"),c)},transition:function(a){var c;if(Modernizr.csstransforms&&Modernizr.csstransitions){if(Modernizr.csstransforms3d){c="translate3d("+a.x+"px, "+a.y+"px, 0px) scale3d("+a.scale+", "+a.scale+", "+a.scale+")"}else{c="translate("+a.x+"px, "+a.y+"px) scale("+a.scale+", "+a.scale+")"}b.setPrefixedCss(a.$this,"transform",c)}else{a.$this.animate({left:a.left,top:a.top,opacity:a.opacity,height:a.height,width:a.width},800)}}};a.fn.shuffle=function(c){if(b[c]){return b[c].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof c==="object"||!c){return b.init.apply(this,arguments)}else{a.error("Method "+c+" does not exist on jQuery.shuffle");return false}}})(jQuery)
;(function(a,b){"use strict";var c=b.csstransforms||b.csstransitions,d={init:function(e){var f={itemWidth:230,marginTop:20,marginRight:20,key:"all",speed:800,easing:"ease-out"};if(e){a.extend(f,e)}f.itemCss={position:"absolute",opacity:1,top:0,left:0,marginTop:f.marginTop,marginRight:f.marginRight,"float":"left"};return this.each(function(){var e=a(this),g=e.children(),h=Math.floor(e.width()/f.itemWidth),i=g.first().outerHeight(),j,k=b.prefixed("transition"),l=d.getPrefixed("transform");e.css("position","relative").get(0).style[k]="height "+f.speed+"ms "+f.easing;g.each(function(b){var d=f.itemCss;if(c){this.style[k]=l+" "+f.speed+"ms "+f.easing+", opacity "+f.speed+"ms "+f.easing}if((b+1)%h===0){d.marginRight=0}a(this).css(f.itemCss)});j={$items:g,itemsPerRow:h,itemHeight:i,itemWidth:f.itemWidth,marginTop:f.marginTop,marginRight:f.marginRight,settings:f};e.data("shuffle",j);d.shuffle.call(this,"all")})},shuffle:function(b){var c=a(this),e=c.data("shuffle"),f,g;if(!e){d.init.call(this);e=a(this).data("shuffle")}if(!b)b="all";if(b==="all"){e.$items.removeClass("concealed")}else{e.$items.removeClass("concealed filtered").each(function(){var c=a(this).attr("data-key"),d=a.parseJSON(c);if(a.inArray(b,d)===-1){a(this).addClass("concealed");return}})}f=e.$items.not(".concealed").addClass("filtered").length;d.shrink.call(this);d.filter.call(this);g=Math.ceil(f/e.itemsPerRow)*(e.itemHeight+e.marginTop)-e.marginTop;c.css("height",g+"px")},shrink:function(){var b=a(this).find(".concealed");if(b.length===0){return}b.each(function(){var b=a(this),c=parseInt(b.attr("data-x"),10),e=parseInt(b.attr("data-y"),10),f=b.parent().data("shuffle");if(!c)c=0;if(!e)e=0;d.transition({$this:b,x:c,y:e,left:c+f.itemWidth/2+"px",top:e+f.itemHeight/2+"px",scale:.001,opacity:0,height:"0px",width:"0px"})})},filter:function(){var b=0,c=a(this).find(".filtered");c.each(function(c){var e=a(this),f=e.parent().data("shuffle"),g=c%f.itemsPerRow*(f.itemWidth+f.marginRight),h=Math.floor(c/f.itemsPerRow);if(c%f.itemsPerRow===0){b=h*(f.itemHeight+f.marginTop)}e.attr({"data-x":g,"data-y":b});d.transition({$this:e,x:g,y:b,left:g+"px",top:b+"px",scale:1,opacity:1,height:f.itemHeight+"px",width:f.itemWidth+"px"})})},setPrefixedCss:function(a,c,d){a.css(b.prefixed(c),d)},getPrefixed:function(a){return b.prefixed(a).replace(/([A-Z])/g,function(a,b){return"-"+b.toLowerCase()}).replace(/^ms-/,"-ms-")},transition:function(a){var e;if(c){if(b.csstransforms3d){e="translate3d("+a.x+"px, "+a.y+"px, 0px) scale3d("+a.scale+", "+a.scale+", "+a.scale+")"}else{e="translate("+a.x+"px, "+a.y+"px) scale("+a.scale+", "+a.scale+")"}a.$this.css("opacity",a.opacity);d.setPrefixedCss(a.$this,"transform",e)}else{a.$this.animate({left:a.left,top:a.top,opacity:a.opacity,height:a.height,width:a.width},800)}}};a.fn.shuffle=function(b){if(d[b]){return d[b].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof b==="object"||!b){return d.init.apply(this,arguments)}else{a.error("Method "+b+" does not exist on jQuery.shuffle");return false}}})(jQuery,Modernizr);

@ -1,38 +0,0 @@
#grid {
position: relative;
-moz-transition: height 0.8s ease-out;
-o-transition: height 0.8s ease-out;
-webkit-transition: height 0.8s ease-out;
-ms-transition: height 0.8s ease-out;
transition: height 0.8s ease-out;
}
#grid .item {
position: relative;
-moz-transition: -moz-transform 0.8s ease-out, opacity 0.8s ease-out;
-o-transition: -o-transform 0.8s ease-out, opacity 0.8s ease-out;
-webkit-transition: -webkit-transform 0.8s ease-out, opacity 0.8s ease-out;
-ms-transition: -ms-transform 0.8s ease-out, opacity 0.8s ease-out;
transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}
#grid .item.filtered {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
#grid .item.concealed {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#grid .item:nth-child(4n) {
margin-right: 0;
}
Loading…
Cancel
Save