Created
January 30, 2017 06:47
-
-
Save sohan5005/595e9e2131b21a4e3826bb502c8a4da2 to your computer and use it in GitHub Desktop.
Easy setup for shuffle.js with filter system
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Shuffle.js</title> | |
| <style> | |
| body { | |
| max-width: 1170px; | |
| margin: auto; | |
| } | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .shuffle-filtering ul { | |
| display: table; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| margin: auto; | |
| } | |
| .shuffle-filtering ul li { | |
| display: block; | |
| float: left; | |
| } | |
| .shuffle-filtering ul li a { | |
| padding: 15px; | |
| text-decoration: none; | |
| display: block; | |
| } | |
| .shuffle-items-container .shuffle-item { | |
| width: 33.33%; | |
| float: left; | |
| background: #d65959; | |
| color: #fff; | |
| text-align: center; | |
| line-height: 15; | |
| } | |
| .shuffle-items-container .shuffle-item.group-two { | |
| background: #59d6c5; | |
| } | |
| .shuffle-items-container .shuffle-item.group-three { | |
| background: #7e59d6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="initiate-shuffle-js"> | |
| <div class="shuffle-filtering"> | |
| <ul> | |
| <li data-group="*"><a href="#">All</a></li> | |
| <li data-group="group-one"><a href="#">Group One</a></li> | |
| <li data-group="group-two"><a href="#">Group Two</a></li> | |
| <li data-group="group-three"><a href="#">Group Three</a></li> | |
| </ul> | |
| </div> | |
| <div class="shuffle-items-container"> | |
| <div class="shuffle-item group-one">One</div> | |
| <div class="shuffle-item group-two">Two</div> | |
| <div class="shuffle-item group-one">One</div> | |
| <div class="shuffle-item group-three">Three</div> | |
| <div class="shuffle-item group-one">One</div> | |
| <div class="shuffle-item group-three">Three</div> | |
| <div class="shuffle-item group-two">Two</div> | |
| <div class="shuffle-item group-three">Three</div> | |
| <div class="shuffle-item group-two">Two</div> | |
| </div> | |
| </div> | |
| <script src="vendor/jquery-1.11.2.js"></script> | |
| <script src="shuffle.min.js"></script> | |
| <script src="shuffle-init.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| var TS_shuffle = []; | |
| function init() { | |
| $('.initiate-shuffle-js').each(function(i) { | |
| var elm = $(this).data('shuffle-id', i); | |
| TS_shuffle[i] = new shuffle( elm.find('.shuffle-items-container').get(0), { | |
| itemSelector: '.shuffle-item', | |
| sizer: '.shuffle-item', | |
| speed: 650, | |
| staggerAmount: 50, | |
| staggerAmountMax: 250 | |
| }); | |
| }); | |
| } | |
| $(document).on('click', '.shuffle-filtering ul li a', function(e) { | |
| e.preventDefault(); | |
| var li = $(this).closest('li'), | |
| groups, i; | |
| if( !li.hasClass('active') ) { | |
| li.addClass('active').siblings().removeClass('active'); | |
| groups = li.data('group'); | |
| i = li.closest('.initiate-shuffle-js').data('shuffle-id'); | |
| if( typeof TS_shuffle[i] !== 'undefined' ) { | |
| TS_shuffle[i].filter(function(element) { | |
| if( groups === '*' ) { | |
| return true; | |
| } else { | |
| return $(element).hasClass(groups); | |
| } | |
| }); | |
| } | |
| } | |
| return false; | |
| }); | |
| $(document).ready(init); | |
| })(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment