Skip to content

Instantly share code, notes, and snippets.

@Serega1288

Serega1288/filter shuffle

Last active February 25, 2018 12:12
Show Gist options
  • Save Serega1288/c09512da8b748a585c1df0572aba7d32 to your computer and use it in GitHub Desktop.
Save Serega1288/c09512da8b748a585c1df0572aba7d32 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
filter shuffle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shuffle.js</title>
</head>
<body class="home">
<section id="demo">
<div class="filters-group">
<label for="filters-search-input" class="filter-label">Search</label>
<input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
</div>
<div class="filters-group">
<p class="filter-label">Filter</p>
<div class="btn-group filter-options">
<button class="btn btn--primary" data-group="space">Space</button>
<button class="btn btn--primary" data-group="nature">Nature</button>
<button class="btn btn--primary" data-group="animal">Animal</button>
<button class="btn btn--primary" data-group="city">City</button>
</div>
</div>
<fieldset class="filters-group">
<legend class="filter-label">Sort</legend>
<div class="btn-group sort-options">
<label class="btn active">
<input type="radio" name="sort-value" value="dom" /> Default
</label>
<label class="btn">
<input type="radio" name="sort-value" value="title" /> Title
</label>
<label class="btn">
<input type="radio" name="sort-value" value="date-created" /> Date Created
</label>
</div>
</fieldset>
</div>
<div id="grid" class="my-shuffle-container">
<figure class="picture-item" data-groups='["nature"]' data-date-created="2017-04-30" data-title="Lake Walchen">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Lake Walchen</figcaption>
</figure>
<figure class="picture-item " data-groups='["city"]' data-date-created="2016-07-01" data-title="Golden Gate Bridge">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Golden Gate Bridge</a>
</figcaption>
</figure>
<figure class="picture-item" data-groups='["animal"]' data-date-created="2016-08-12" data-title="Crocodile">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Crocodile </figcaption>
</figure>
<figure class="picture-item picture-item--h2" data-groups='["space"]' data-date-created="2016-03-07" data-title="SpaceX">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> SpaceX</figcaption>
</figure>
<figure class="picture-item" data-groups='["city"]' data-date-created="2016-06-09" data-title="Crossroads">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Crossroads </figcaption>
</figure>
<figure class="picture-item " data-groups='["space","nature"]' data-date-created="2016-06-29" data-title="Milky Way">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Milky Way </figcaption>
</figure>
<figure class="picture-item picture-item--h2" data-groups='["space"]' data-date-created="2015-11-06" data-title="Earth">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Earth </figcaption>
</figure>
<figure class="picture-item picture-item--h2" data-groups='["animal"]' data-date-created="2015-07-23" data-title="Turtle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Turtle </figcaption>
</figure>
<figure class="picture-item" data-groups='["nature"]' data-date-created="2014-10-12" data-title="Stanley Park">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Stanley Park </figcaption>
</figure>
<figure class="picture-item" data-groups='["animal"]' data-date-created="2017-01-12" data-title="Astronaut Cat">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Astronaut Cat </figcaption>
</figure>
<figure class="picture-item " data-groups='["city"]' data-date-created="2017-01-19" data-title="San Francisco">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> San Francisco </figcaption>
</figure>
<figure class="picture-item" data-groups='["nature","city"]' data-date-created="2015-10-20" data-title="Central Park">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam nobis dolorem rem ratione quibusdam? Et modi enim recusandae eum perspiciatis, alias laborum in explicabo quis omnis sequi, cum quidem accusantium!
<figcaption class="picture-item__title"> Central Park </figcaption>
</figure>
</div>
</section>
<script src="https://vestride.github.io/Shuffle/dist/shuffle.js"></script>
<script src="https://vestride.github.io/Shuffle/js/demos/homepage.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment