Filtering with shuffle.js

Developer
Deyan Dimitrov
Size
2,712 Kb
Views
72,864
  1. Filtering with shuffle.js Previews
  2. Filtering with shuffle.js HTML Codes
  3. Filtering with shuffle.js CSS Codes
  4. Filtering with shuffle.js JS Codes

How do I make an filtering with shuffle.js?

What is a filtering with shuffle.js? How do you make a filtering with shuffle.js? This script and codes were developed by Deyan Dimitrov on 13 November 2022, Sunday.

Filtering with shuffle.js Previews
IQ Test

Filtering with shuffle.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Filtering with shuffle.js</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<!-- Start your code here -->
<div> <div class="filter-options"> <button class="btn btn-info" data-group="wallpaper">Wallpapers</button> <button class="btn btn-danger" data-group="graphics">Graphic Design</button> <button class="btn btn-success" data-group="photography">Photos</button> <button class="btn btn-warning" data-group="3d">3D Renders</button> <button class="btn btn-default all-btn" data-group="all">All</button> </div>
</div>
<div id="grid" class="row "> <figure class="picture-item col-sm-4" data-groups='["photography"]'> <img class="img-responsive" src="http://images4.fanpop.com/image/photos/20600000/Young-Jack-samurai-jack-20673443-1049-763.jpg" alt=""> </figure> <figure class="picture-item col-sm-4" data-groups='["wallpaper","3d"]'> <img class="img-responsive" src="http://www.jimzub.com/wp-content/uploads/2013/08/SamuraiJack02A.jpg" alt=""> </figure> <figure class="picture-item col-sm-4" data-groups='["wallpaper","3d"]'> <img class="img-responsive" src="http://www.jimzub.com/wp-content/uploads/2013/08/SamuraiJack02A.jpg" alt=""> </figure> <figure class="picture-item col-sm-4" data-groups='["wallpaper"]'> <img class="img-responsive" src="http://www.jimzub.com/wp-content/uploads/2013/08/SamuraiJack02A.jpg" alt=""> </figure> <figure class="picture-item col-sm-4" data-groups='["graphics","3d"]'> <img class="img-responsive" src="https://media.tumblr.com/tumblr_mc40plO0Ge1r990rz.jpg" alt=""> </figure> <figure class="picture-item col-sm-4" data-groups='["graphics","3d"]'> <img class="img-responsive" src="https://media.tumblr.com/tumblr_mc40plO0Ge1r990rz.jpg" alt=""> </figure>
</div>
<!-- End your code here -->
</body> <script src='https://vestride.github.io/Shuffle/dist/shuffle.js'></script> <script src="js/index.js"></script>
</body>
</html>

Filtering with shuffle.js - Script Codes CSS Codes

figure .img-responsive{ margin: 1em auto; width:150px;
}
/* Hiding All button if not needed or delete it from html*/
.filter-options .all-btn{ display: none;
}

Filtering with shuffle.js - Script Codes JS Codes

'use strict';
var Shuffle = window.shuffle;
var Demo = function (element) { this.element = element; this.shuffle = new Shuffle(element, { itemSelector: '.picture-item', sizer: element.querySelector('.my-sizer-element'), }); this.addFilterButtons();
};
Demo.prototype.toArray = function (arrayLike) { return Array.prototype.slice.call(arrayLike);
};
Demo.prototype.addFilterButtons = function () { var options = document.querySelector('.filter-options'); if (!options) { return; } var filterButtons = this.toArray( options.children ); filterButtons.forEach(function (button) { button.addEventListener('click', this._handleFilterClick.bind(this), false); }, this);
};
Demo.prototype._handleFilterClick = function (evt) { var btn = evt.currentTarget; var isActive = btn.classList.contains('active'); var btnGroup = btn.getAttribute('data-group'); this._removeActiveClassFromChildren(btn.parentNode); var filterGroup; if (isActive) { btn.classList.remove('active'); } else { btn.classList.add('active'); filterGroup = btnGroup; } this.shuffle.filter(filterGroup);
};
Demo.prototype._removeActiveClassFromChildren = function (parent) { var children = parent.children; for (var i = children.length - 1; i >= 0; i--) { children[i].classList.remove('active'); }
};
//
document.addEventListener('DOMContentLoaded', function () { window.demo = new Demo(document.getElementById('grid'));
});
Filtering with shuffle.js - Script Codes
Filtering with shuffle.js - Script Codes
Home Page Home
Developer Deyan Dimitrov
Username deyand
Uploaded November 13, 2022
Rating 3
Size 2,712 Kb
Views 72,864
Do you need developer help for Filtering with shuffle.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Deyan Dimitrov (deyand) Script Codes
Name
Sliding side menu with icons
A Pen by Deyan Dimitrov
Dropdown Menu Effects
Sliding link on hover
Expandable Boxes
Mobile Dropdown Menu
Fixed header
Progress Bar with jQuery
Responsive Mobile Menu
Fixed header jquery
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!