Converted to Jekyll. Woo!
Glen Cheney
11 years ago
parent
f8fdbaef1f
commit
060c3315ee
@ -1,2 +1,3 @@
|
||||
|
||||
.DS_Store
|
||||
_site
|
||||
@ -0,0 +1,8 @@
|
||||
source: .
|
||||
destination: ./_site
|
||||
plugins: ./_plugins
|
||||
layouts: ./_layouts
|
||||
include: ['.htaccess']
|
||||
exclude: []
|
||||
|
||||
permalink: /:title
|
||||
@ -0,0 +1,2 @@
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>{{ page.title }}</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<meta property="og:title" content="{{ page.title }}" />
|
||||
<meta property="og:description" content="Shuffle, categorize, sort, and filter a grid of items" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://vestride.github.com/Shuffle/" />
|
||||
<meta property="og:image" content="http://vestride.github.com/Shuffle/img/hero.png" />
|
||||
<meta property="og:site_name" content="jQuery Shuffle Plugin" />
|
||||
<meta property="fb:admins" content="771347349" />
|
||||
<meta name="author" content="https://plus.google.com/u/0/100210640453700033824" />
|
||||
|
||||
<link href="https://plus.google.com/u/0/100210640453700033824" rel="author" />
|
||||
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/prism.css" />
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/style.css" />
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Poly:400,400italic" />
|
||||
{% if page.extraCSS %}
|
||||
{% for href in page.extraCSS %}
|
||||
<link rel="stylesheet" href="{{ href }}" />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body class="{{ page.bodyClass }}">
|
||||
@ -0,0 +1,9 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="js/jquery.shuffle.js"></script>
|
||||
<script src="js/prism.js"></script>
|
||||
|
||||
{% if page.extraJS && page.extraJS.length %}
|
||||
{% for src in page.extraJS %}
|
||||
<script src="js/demos/{{ src }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
{% include head.html %}
|
||||
<main role="main" id="main">
|
||||
{{ content }}
|
||||
</main>
|
||||
{% include scripts.html %}
|
||||
{% include foot.html %}
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
layout: default
|
||||
title: Basic Shuffle Demo
|
||||
bodyClass: basic
|
||||
extraJS: [ "homepage.js" ]
|
||||
---
|
||||
<ul>
|
||||
<li>Use the one from the main homepage demo</li>
|
||||
</ul>
|
||||
@ -0,0 +1,404 @@
|
||||
---
|
||||
layout: default
|
||||
title: Shuffle Responsive Demo
|
||||
bodyClass: masonry
|
||||
extraJS: [ "gallery.js" ]
|
||||
extraCSS: [ "http://twitter.github.io/bootstrap/assets/css/bootstrap.css", "http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css", "/css/gallery.css" ]
|
||||
---
|
||||
<section class="gallery container">
|
||||
<div class="hero">
|
||||
<img src="http://placekitten.com/1170/400" alt="">
|
||||
<div class="ghost-center-wrap full">
|
||||
<div class="hero-text ghost-center">
|
||||
<div>Example</div>
|
||||
<h1>Responsive bootstrap</h1>
|
||||
<h2>With compounded filters</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Filters</h2>
|
||||
<div class="product-filter">
|
||||
<div class="filter-options row">
|
||||
|
||||
<ul class="span6 unstyled megapixels">
|
||||
<li data-megapixels="14-16" class="btn">14-16MP</li>
|
||||
<li data-megapixels="16-18" class="btn">16-18MP</li>
|
||||
<li data-megapixels="18-20" class="btn">18-20MP</li>
|
||||
<li data-megapixels="20+" class="btn">20MP+</li>
|
||||
</ul>
|
||||
|
||||
<ul class="span6 unstyled features">
|
||||
<li>
|
||||
<label><input type="checkbox" value="lcd"> LCD</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="touchscreen"> Touchscreen LCD</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="panorama"> Intelligent Sweep Panorama</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="lightweight"> Lightweight</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="products">
|
||||
|
||||
<div class="span6 h2 product box" data-groups='["lcd", "lightweight"]' data-megapixels="20+" data-price="649">
|
||||
<div class="product-img">
|
||||
<img src="/img/baseball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Explore <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 product link box" data-groups='["lcd", "touchscreen", "panorama", "lightweight"]' data-megapixels="16-18" data-price="1199">
|
||||
<p>Massive Sensor Loruem Ipsum</p>
|
||||
<a href="#" class="btn">Explore Sensor</a>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["panorama", "lightweight"]' data-megapixels="16-18" data-price="329">
|
||||
<div class="product-img">
|
||||
<img src="/img/pumpkin.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "lightweight"]' data-megapixels="18-20" data-price="369">
|
||||
<div class="product-img">
|
||||
<img src="/img/tennis-ball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="269">
|
||||
<div class="product-img">
|
||||
<img src="/img/imac.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["lcd", "panorama"]' data-megapixels="14-16" data-price="109">
|
||||
<div class="product-img">
|
||||
<img src="/img/master-chief.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 h2 product box" data-groups='["lcd", "panorama", "lightweight"]' data-megapixels="18-20" data-price="479">
|
||||
<div class="product-img">
|
||||
<img src="/img/es-blue.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen", "lightweight"]' data-megapixels="18-20" data-price="209">
|
||||
<div class="product-img">
|
||||
<img src="/img/vestride-red.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["touchscreen", "panorama", "lightweight"]' data-megapixels="20+" data-price="2799">
|
||||
<div class="product-img">
|
||||
<img src="/img/newegg.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 link product box" data-groups='["panorama", "lightweight"]' data-megapixels="20+" data-price="329">
|
||||
<p>Great Summer Travel Loruem Ipsum</p>
|
||||
<a href="#" class="btn">Products for Summer Vacation</a>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lightweight"]' data-megapixels="14-16" data-price="199">
|
||||
<div class="product-img">
|
||||
<img src="/img/eightfoldarc.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["panorama"]' data-megapixels="14-16" data-price="149">
|
||||
<div class="product-img">
|
||||
<img src="/img/ground.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$149.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd"]' data-megapixels="16-18" data-price="789">
|
||||
<div class="product-img">
|
||||
<img src="/img/grassy-hills.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$789.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="16-18" data-price="529">
|
||||
<div class="product-img">
|
||||
<img src="/img/tennis-ball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="999">
|
||||
<div class="product-img">
|
||||
<img src="/img/pumpkin.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="20+" data-price="1599">
|
||||
<div class="product-img">
|
||||
<img src="/img/imac.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1>Another section</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
layout: default
|
||||
title: Shuffle Minimal Demo
|
||||
bodyClass: null
|
||||
extraJS: [ "minimal.js" ]
|
||||
---
|
||||
<style>
|
||||
#grid {
|
||||
outline: 1px solid rgb(255, 255, 255);
|
||||
outline: 1px solid rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
.simple-item {
|
||||
width: 33.33333%; /* 3 per row */
|
||||
}
|
||||
|
||||
.simple-item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Spacing Exmaple */
|
||||
.spacing #grid {
|
||||
padding: 10px;
|
||||
}
|
||||
.spacing .simple-item {
|
||||
width: 306px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* add some space to the bottom of the document */
|
||||
.spacer {
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
</style>
|
||||
<div class="container container-main">
|
||||
|
||||
<section>
|
||||
<h2>Minimal</h2>
|
||||
|
||||
<button class="js-spacing">Add some space</button>
|
||||
|
||||
<div class="filter clearfix">
|
||||
<p class="lfloat label">Filter:</p>
|
||||
<ul class="filter-options control-group lfloat">
|
||||
<li data-group="all" class="active">Most Recent</li>
|
||||
<li data-group="wallpaper">Wallpapers</li>
|
||||
<li data-group="graphics">Graphic Design</li>
|
||||
<li data-group="photography">Photography</li>
|
||||
<li data-group="3d">3D Renders</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="grid">
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/baseball.png" alt="" />
|
||||
<div><a href="img/originals/baseball.jpg">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper", "3d"]'>
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/imac.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["graphics"]'>
|
||||
<img src="img/master-chief.png" alt="" />
|
||||
<div><a href="#">Graphic Design</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/es-blue.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
<div><a href="#">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-red.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["graphics"]'>
|
||||
<img src="img/newegg.png" alt="" />
|
||||
<div><a href="#">Motion Graphics</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper"]'>
|
||||
<img src="img/eightfoldarc.png" alt="" />
|
||||
<div><a href="#">Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/ground.png" alt=""/>
|
||||
<div><a href="img/originals/baseball.jpg">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper"]'>
|
||||
<img src="img/grassy-hills.png" alt="" />
|
||||
<div><a href="#">Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-classy.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
layout: default
|
||||
title: Shuffle Responsive Demo
|
||||
bodyClass: null
|
||||
extraJS: []
|
||||
---
|
||||
<ul>
|
||||
<li>Will be <strong><em>fully responsive</em></strong></li>
|
||||
</ul>
|
||||
@ -1,430 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Shuffle Responsive Example</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<meta name="author" content="https://plus.google.com/u/0/100210640453700033824" />
|
||||
|
||||
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<link href="css/gallery.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body class="masonry">
|
||||
|
||||
<section class="gallery container">
|
||||
<div class="hero">
|
||||
<img src="http://placekitten.com/1170/400" alt="">
|
||||
<div class="ghost-center-wrap full">
|
||||
<div class="hero-text ghost-center">
|
||||
<div>Example</div>
|
||||
<h1>Responsive bootstrap</h1>
|
||||
<h2>With compounded filters</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Filters</h2>
|
||||
<div class="product-filter">
|
||||
<div class="filter-options row">
|
||||
|
||||
<ul class="span6 unstyled megapixels">
|
||||
<li data-megapixels="14-16" class="btn">14-16MP</li>
|
||||
<li data-megapixels="16-18" class="btn">16-18MP</li>
|
||||
<li data-megapixels="18-20" class="btn">18-20MP</li>
|
||||
<li data-megapixels="20+" class="btn">20MP+</li>
|
||||
</ul>
|
||||
|
||||
<ul class="span6 unstyled features">
|
||||
<li>
|
||||
<label><input type="checkbox" value="lcd"> LCD</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="touchscreen"> Touchscreen LCD</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="panorama"> Intelligent Sweep Panorama</label>
|
||||
</li>
|
||||
<li>
|
||||
<label><input type="checkbox" value="lightweight"> Lightweight</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="products">
|
||||
|
||||
<div class="span6 h2 product box" data-groups='["lcd", "lightweight"]' data-megapixels="20+" data-price="649">
|
||||
<div class="product-img">
|
||||
<img src="img/baseball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Explore <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 product link box" data-groups='["lcd", "touchscreen", "panorama", "lightweight"]' data-megapixels="16-18" data-price="1199">
|
||||
<p>Massive Sensor Loruem Ipsum</p>
|
||||
<a href="#" class="btn">Explore Sensor</a>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["panorama", "lightweight"]' data-megapixels="16-18" data-price="329">
|
||||
<div class="product-img">
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "lightweight"]' data-megapixels="18-20" data-price="369">
|
||||
<div class="product-img">
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="269">
|
||||
<div class="product-img">
|
||||
<img src="img/imac.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["lcd", "panorama"]' data-megapixels="14-16" data-price="109">
|
||||
<div class="product-img">
|
||||
<img src="img/master-chief.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 h2 product box" data-groups='["lcd", "panorama", "lightweight"]' data-megapixels="18-20" data-price="479">
|
||||
<div class="product-img">
|
||||
<img src="img/es-blue.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (41)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>20.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>3" <span class="product-meta-name">lcd</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$649.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen", "lightweight"]' data-megapixels="18-20" data-price="209">
|
||||
<div class="product-img">
|
||||
<img src="img/vestride-red.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3 product box" data-groups='["touchscreen", "panorama", "lightweight"]' data-megapixels="20+" data-price="2799">
|
||||
<div class="product-img">
|
||||
<img src="img/newegg.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$329.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span6 link product box" data-groups='["panorama", "lightweight"]' data-megapixels="20+" data-price="329">
|
||||
<p>Great Summer Travel Loruem Ipsum</p>
|
||||
<a href="#" class="btn">Products for Summer Vacation</a>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lightweight"]' data-megapixels="14-16" data-price="199">
|
||||
<div class="product-img">
|
||||
<img src="img/eightfoldarc.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (6)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.1 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>5x <span class="product-meta-name">optical zoom</span></li>
|
||||
<li>720p <span class="product-meta-name">hd video</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$1199.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["panorama"]' data-megapixels="14-16" data-price="149">
|
||||
<div class="product-img">
|
||||
<img src="img/ground.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$149.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd"]' data-megapixels="16-18" data-price="789">
|
||||
<div class="product-img">
|
||||
<img src="img/grassy-hills.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$789.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="16-18" data-price="529">
|
||||
<div class="product-img">
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="999">
|
||||
<div class="product-img">
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="20+" data-price="1599">
|
||||
<div class="product-img">
|
||||
<img src="img/imac.png" alt="" />
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<div class="product-model">ASDF-1</div>
|
||||
<div class="product-name">Camera JKLP</div>
|
||||
<div class="product-rating">***** (10)</div>
|
||||
<div class="product-meta">
|
||||
<ul>
|
||||
<li>16.2 <span class="product-meta-name">megapixels</span></li>
|
||||
<li>Waterproof <span class="product-meta-name">body</span></li>
|
||||
<li>Cool <span class="product-meta-name">sensor</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="muted">Starting at</span>
|
||||
<br>
|
||||
<b>$529.99</b> <span class="muted">MSRP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1>Another section</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
|
||||
<script src="js/jquery.shuffle.js"></script>
|
||||
<script src="js/gallery.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<ul>
|
||||
<li>Use the one from the main homepage demo</li>
|
||||
</ul>
|
||||
@ -0,0 +1,75 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
// Set up button clicks
|
||||
$('.filter-options li').on('click', function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid');
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.filter-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle($this.data('group'));
|
||||
});
|
||||
|
||||
// Sorting options
|
||||
$('.sort-options li').on('click', function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid'),
|
||||
sort = $this.data('sort'),
|
||||
opts = {};
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.sort-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// We're given the element wrapped in jQuery
|
||||
if (sort === 'date-created') {
|
||||
opts = {
|
||||
by: function($el) {
|
||||
return $el.data('date-created');
|
||||
}
|
||||
}
|
||||
} else if (sort === 'title') {
|
||||
opts = {
|
||||
by: function($el) {
|
||||
return $el.data('title').toLowerCase();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle('sort', opts);
|
||||
});
|
||||
|
||||
// Advanced filtering
|
||||
$('.filter .search').on('keyup change', function() {
|
||||
var val = this.value.toLowerCase();
|
||||
$('#grid').shuffle(function($el, shuffle) {
|
||||
|
||||
// Only search elements in the current group
|
||||
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var text = $.trim($el.text()).toLowerCase();
|
||||
return text.indexOf(val) != -1;
|
||||
});
|
||||
});
|
||||
|
||||
// instantiate the plugin
|
||||
$('#grid').shuffle();
|
||||
|
||||
// Destroy it! o_O
|
||||
// $('#grid').shuffle('destroy');
|
||||
|
||||
|
||||
// You can subscribe to custom events: shrink, shrunk, filter, filtered, and sorted
|
||||
$('#grid').on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
|
||||
if ( window.console ) {
|
||||
console.log(evt.type, shuffle, this);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@ -0,0 +1,41 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
// Set up button clicks
|
||||
$('.filter-options li').on('click', function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid');
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.filter-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle($this.data('group'));
|
||||
});
|
||||
|
||||
// instantiate the plugin
|
||||
$('#grid').shuffle();
|
||||
|
||||
|
||||
// Add space button
|
||||
$('.js-spacing').on('click', function() {
|
||||
var $body = $(document.body);
|
||||
$body.toggleClass('spacing');
|
||||
if ( $body.hasClass('spacing') ) {
|
||||
$(this).text('Remove the spacing');
|
||||
$('#grid')
|
||||
.shuffle('destroy')
|
||||
// you can hide the initial transition if you want
|
||||
.shuffle({
|
||||
showInitialTransition: false
|
||||
});
|
||||
|
||||
} else {
|
||||
$(this).text('Add some space');
|
||||
$('#grid')
|
||||
.shuffle('destroy')
|
||||
.shuffle();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@ -1,8 +1,8 @@
|
||||
/*
|
||||
HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||
*/
|
||||
(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
|
||||
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
|
||||
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
|
||||
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
|
||||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
|
||||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
|
||||
for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);
|
||||
|
||||
@ -1,170 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Shuffle - Minimal</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Poly:400,400italic' rel='stylesheet' type='text/css' />
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<style>
|
||||
#grid {
|
||||
outline: 1px solid rgb(255, 255, 255);
|
||||
outline: 1px solid rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
.simple-item {
|
||||
width: 33.33333%; /* 3 per row */
|
||||
}
|
||||
|
||||
.simple-item img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Spacing Exmaple */
|
||||
.spacing #grid {
|
||||
padding: 10px;
|
||||
}
|
||||
.spacing .simple-item {
|
||||
width: 306px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* add some space to the bottom of the document */
|
||||
.spacer {
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container container-main">
|
||||
|
||||
<section>
|
||||
<h2>Minimal</h2>
|
||||
|
||||
<button class="js-spacing">Add some space</button>
|
||||
|
||||
<div class="filter clearfix">
|
||||
<p class="lfloat label">Filter:</p>
|
||||
<ul class="filter-options control-group lfloat">
|
||||
<li data-group="all" class="active">Most Recent</li>
|
||||
<li data-group="wallpaper">Wallpapers</li>
|
||||
<li data-group="graphics">Graphic Design</li>
|
||||
<li data-group="photography">Photography</li>
|
||||
<li data-group="3d">3D Renders</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="grid">
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/baseball.png" alt="" />
|
||||
<div><a href="img/originals/baseball.jpg">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper", "3d"]'>
|
||||
<img src="img/tennis-ball.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/imac.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["graphics"]'>
|
||||
<img src="img/master-chief.png" alt="" />
|
||||
<div><a href="#">Graphic Design</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/es-blue.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/pumpkin.png" alt="" />
|
||||
<div><a href="#">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-red.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["graphics"]'>
|
||||
<img src="img/newegg.png" alt="" />
|
||||
<div><a href="#">Motion Graphics</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper"]'>
|
||||
<img src="img/eightfoldarc.png" alt="" />
|
||||
<div><a href="#">Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["photography"]'>
|
||||
<img src="img/ground.png" alt=""/>
|
||||
<div><a href="img/originals/baseball.jpg">Photography</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["wallpaper"]'>
|
||||
<img src="img/grassy-hills.png" alt="" />
|
||||
<div><a href="#">Wallpaper</a></div>
|
||||
</div>
|
||||
<div class="simple-item" data-groups='["3d", "wallpaper"]'>
|
||||
<img src="img/vestride-classy.png" alt="" />
|
||||
<div><a href="#">3D Render, Wallpaper</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="js/jquery.shuffle.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
// Set up button clicks
|
||||
$('.filter-options li').on('click', function() {
|
||||
var $this = $(this),
|
||||
$grid = $('#grid');
|
||||
|
||||
// Hide current label, show current label in title
|
||||
$('.filter-options .active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
|
||||
// Filter elements
|
||||
$grid.shuffle($this.data('group'));
|
||||
});
|
||||
|
||||
// instantiate the plugin
|
||||
$('#grid').shuffle();
|
||||
|
||||
|
||||
// Add space button
|
||||
$('.js-spacing').on('click', function() {
|
||||
var $body = $(document.body);
|
||||
$body.toggleClass('spacing');
|
||||
if ( $body.hasClass('spacing') ) {
|
||||
$(this).text('Remove the spacing');
|
||||
$('#grid')
|
||||
.shuffle('destroy')
|
||||
// you can hide the initial transition if you want
|
||||
.shuffle({
|
||||
showInitialTransition: false
|
||||
});
|
||||
|
||||
} else {
|
||||
$(this).text('Add some space');
|
||||
$('#grid')
|
||||
.shuffle('destroy')
|
||||
.shuffle();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<ul>
|
||||
<li>Will be <strong><em>fully responsive</em></strong></li>
|
||||
</ul>
|
||||
Loading…
Reference in New Issue