Arriver Shuffle.js et le filtrage de travail

Je suis perplexe. Eu la maçonnerie de la partie, mais ne peut pas comprendre pourquoi le filtrage ne fonctionne pas. J'ai été par le script, par rapport à celui sur le site de démo, et je vais les noix.

Je suis en utilisant : https://github.com/Vestride/Shuffle et Bootstrap 3. C'est probablement ce qui n'a rien à voir avec Bootstrap.

DÉMO w/edit: http://jsbin.com/vaquci/1/edit

DÉMO: http://jsbin.com/vaquci/1/

HTML contient toutes les dépendances :: jQuery 1.9.1 ou plus, Modernizr, etc.,

HTML

<div class="container">
<div class="filter-options">
<button class="btn btn-default" data-group="wallpaper">Wallpapers</button>
<button class="btn btn-default" data-group="graphics">Graphic Design</button>
<button class="btn btn-default" data-group="photography">Photos</button>
<button class="btn btn-default" data-group="3d">3D Renders</button>
</div>      
<div id="grid" class="row">
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x534" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x566" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x504" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x316" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x594" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x796" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x534" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x566" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x504" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x316" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x594" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x796" alt="" class="img-responsive">
</div>
<!-- sizer -->
<div class="col-xs-6 col-sm-4 col-md-3 shuffle_sizer"></div>          
</div><!-- /#grid -->
</div><!-- /.container -->

jQuery:

var shuffleme = (function( $ ) {
'use strict';
var $grid = $('#grid'),
$filterOptions = $('.filter-options'),
$sizer = $grid.find('.shuffle_sizer'),
init = function() {
//None of these need to be executed synchronously
setTimeout(function() {
listen();
setupFilters();
}, 100);
//instantiate the plugin
$grid.shuffle({
itemSelector: '[class*="col-"]',
sizer: $sizer    
});
},
//Set up button clicks
setupFilters = function() {
var $btns = $filterOptions.children();
$btns.on('click', function() {
var $this = $(this),
isActive = $this.hasClass( 'active' ),
group = isActive ? 'all' : $this.data('group');
//Hide current label, show current label in title
if ( !isActive ) {
$('.filter-options .active').removeClass('active');
}
$this.toggleClass('active');
//Filter elements
$grid.shuffle( 'shuffle', group );
});
$btns = null;
},
//Re layout shuffle when images load. This is only needed
//below 768 pixels because the .picture-item height is auto and therefore
//the height of the picture-item is dependent on the image
//I recommend using imagesloaded to determine when an image is loaded
//but that doesn't support IE7
listen = function() {
var debouncedLayout = $.throttle( 300, function() {
$grid.shuffle('update');
});
//Get all images inside shuffle
$grid.find('img').each(function() {
var proxyImage;
//Image already loaded
if ( this.complete && this.naturalWidth !== undefined ) {
return;
}
//If none of the checks above matched, simulate loading on detached element.
proxyImage = new Image();
$( proxyImage ).on('load', function() {
$(this).off('load');
debouncedLayout();
});
proxyImage.src = this.src;
});
//Because this method doesn't seem to be perfect.
setTimeout(function() {
debouncedLayout();
}, 500);
};      
return {
init: init
};
}( jQuery ));
$(document).ready(function() {
shuffleme.init();
});

CSS

#grid {margin-left:-5px;margin-right:-5px;position:relative; overflow: hidden;}
#grid [class*="col-"] {padding:5px;}
@media (max-width:320px) {
#grid [class*="col-"] {width:100%;}
}
.shuffle_sizer {
position: absolute;
opacity: 0;
visibility: hidden;
}

OriginalL'auteur Christina | 2014-09-14