---
layout: default
title: jQuery Shuffle Plugin
bodyClass: home
extraJS: [ "homepage.js" ]
includeHeader: true
---
< section id = "downloads" >
< div class = "container-fluid" >
< h2 > Downloads< / h2 >
< nav role = "secondary" >
< a href = "js/jquery.shuffle.js" > jquery.shuffle.js< / a >
< a href = "js/jquery.shuffle.min.js" > jquery.shuffle.min.js< / a >
< / nav >
< / div >
< / section >
< section id = "demo" >
< div class = "container-fluid" >
< h2 > Example< / h2 >
< / div >
< div class = "container-fluid filter" >
< div class = "row-fluid" >
< input class = "filter__search js-shuffle-search" type = "search" placeholder = "Search..." / >
< / div >
< div class = "row-fluid" >
< div class = "span9" >
< p class = "filter__label" > Filter:< / p >
< div class = "filter-options btn-group" >
< button class = "btn btn--filter" data-group = "wallpaper" > Wallpapers< / button >
< button class = "btn btn--filter" data-group = "graphics" > Graphic Design< / button >
< button class = "btn btn--filter" data-group = "photography" > Photography< / button >
< button class = "btn btn--filter" data-group = "3d" > 3D Renders< / button >
< / div >
< / div >
< div class = "span3" >
< div class = "pusll-right" >
< p class = "filter__label" > Sort:< / p >
< select class = "sort-options" >
< option value > Default< / option >
< option value = "title" > Title< / option >
< option value = "date-created" > Date Created< / option >
< / select >
< / div >
< / div >
< / div >
< / div >
< div class = "container-fluid" >
< div id = "grid" class = "row-fluid shuffle--container shuffle--fluid" >
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
< div class = "span3 shuffle__sizer" > < / div >
< / div >
< / div >
< / section >
< section id = "demos" >
< div class = "container-fluid" >
< h2 > Demos< / h2 >
< a href = "#nav" > In the nav< / a >
< / div >
< / section >
< section id = "features" >
< div class = "container-fluid" >
{% include features.html %}
< / div >
< / section >
< section id = "options" >
< div class = "container-fluid" >
{% include options.html %}
< / div >
< / section >
< section id = "usage" >
< div class = "container-fluid" >
{% include usage.html %}
< / div >
< / section >
< section id = "events" >
< div class = "container-fluid" >
{% include events.html %}
< / div >
< / section >
< section id = "sorting" >
< div class = "container-fluid" >
{% include sorting.html %}
< / div >
< / section >
< section id = "advanced-filters" >
< div class = "container-fluid" >
{% include advanced-filters.html %}
< / div >
< / section >
< section id = "extra-features" >
< div class = "container-fluid" >
< h2 > Extra Features< / h2 >
< p > Shuffle likely will not grow much farther than the current feature set. If you need something with drag and drop, filling in gaps, more layout modes, etc., I suggest looking into < a target = "_blank" href = "http://packery.metafizzy.co/" > packery< / a > or < a target = "_blank" href = "http://isotope.metafizzy.co/" > isotope< / a > .< / p >
< / div >
< / section >
< section id = "dependencies" >
< div class = "container-fluid" >
< h2 > Dependencies< / h2 >
< ul >
< li > < a target = "_blank" href = "http://jquery.com" > jQuery< / a > < / li >
< li > < a target = "_blank" href = "http://modernizr.com" > Modernizr< / a >
< ul >
< li > A custom Modernizr build has been included with the plugin.< / li >
< li > If you already have Modernizr on your site, you may delete it.< / li >
< li > If you don't know what Modernizr is, leave it!< / li >
< / ul >
< / li >
< / ul >
< / div >
< / section >
< section id = "browsers" >
< div class = "container-fluid" >
< h2 > Supported Browsers< / h2 >
< ul >
< li > Chrome< / li >
< li > Firefox< / li >
< li > IE 7+< / li >
< li > Opera< / li >
< li > Safari< / li >
< / ul >
< p >
Browsers that don't support CSS transitions and transforms < strong > *cough*< / strong > IE < = 9 < strong > *cough*< / strong > will see a less cool, javascript based version of the effect.
< / p >
< / div >
< / section >
< section id = "links" >
< div class = "container-fluid" >
< h2 > Links< / h2 >
< ul >
< li > < a href = "https://github.com/Vestride/Shuffle" > GitHub Repo< / a > < / li >
< li > < a href = "http://isotope.metafizzy.co/" > Inspired by Isotope< / a > < / li >
< li > < a href = "http://glencheney.com" > Me< / a > < / li >
< / ul >
< / div >
< / section >
< section id = "changelog" >
< div class = "container-fluid" >
{% include changelog.html %}
< / div >
< / section >