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.
170 lines
4.4 KiB
HTML
170 lines
4.4 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle.js
|
|
bodyClass: home
|
|
extraJS: [ "demos/homepage.js" ]
|
|
includeHeader: true
|
|
prism: 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--warning" data-group="wallpaper">Wallpapers</button>
|
|
<button class="btn btn--warning" data-group="graphics">Graphic Design</button>
|
|
<button class="btn btn--warning" data-group="photography">Photography</button>
|
|
<button class="btn btn--warning" 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 m-row shuffle--container shuffle--fluid">
|
|
{% for item in site.items %}
|
|
{% assign item = item %}
|
|
{% include picture-item.html %}
|
|
{% endfor %}
|
|
<div class="span3 m-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>
|