In una galleria di immagini sto provando ad integrare Shuffle.js per filtrare le immagini.
Il problema è che appena accedo alla pagina, Firebug mi segnala 3 errori:
- SyntaxError: import declarations may only appear at top level of a module
import 'custom-event-polyfill';
shuffle.js riga 3
- TypeError: $grid.shuffle is not a function
$grid.shuffle({
shuffle_init.js riga 13 (riporto il contenuto del file in seguito)
- TypeError: $grid.shuffle is not a function
$grid.shuffle('update');
shuffle_init.js riga 41
Inizio del file shuffle.js, ma shuffle l'ho installato tramite npm, quindi non dovrebbe essere errato
codice:
'use strict';
import 'custom-event-polyfill'; /***** RIGA 3 *****/
import matches from 'matches-selector';
import arrayUnique from 'array-uniq';
//altro
Codice HTML
codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Marmi</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="main">
<section id="materiali">
<div class="container">
<div class="text-center">
<h1>Marmi</h1>
</div>
<ul id="filter" class="galleria-filter text-center">
<li><a class="btn btn-default active" href="#" data-group="all">Tutti</a></li>
<li><a class="btn btn-default" href="#" data-group="chiari">Chiari</a></li>
<li><a class="btn btn-default" href="#" data-group="scuri">Scuri</a></li>
</ul>
<div class="row">
<ul class="materiali-items list-unstyled" id="grid">
<li class="col-xs-12 col-sm-4 col-md-3" data-groups='["chiari"]'>
<figure class="materiali-item">
<img src="assets/images/marmi/marmo_acquamarina_thumb.jpg" alt="marmo Acquamarina" />
</figure>
</li>
<li class="col-xs-12 col-sm-4 col-md-3" data-groups='["scuri"]'>
<figure class="materiali-item">
<img src="assets/images/marmi/marmo_ambrato_thumb.jpg" alt="marmo Ambrato" />
</figure>
</li>
<!-- poi altre immagini -->
<!-- sizer -->
<li class="col-xs-12 col-sm-4 col-md-3 shuffle_sizer"></li>
</ul><!--/#grid-->
</div>
</div>
</section><!--/#materiali-->
</div><!-- /#main -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/shufflejs/src/shuffle.js"></script>
<script src="assets/js/shuffle_init.js"></script>
</body>
</html>
Codice shuffle_init.js
codice:
var shuffleme = (function( $ ) {
'use strict';
var $grid = $('#grid'),
$filterOptions = $('.galleria-filter li'),
$sizer = $grid.find('.shuffle_sizer'),
init = function() {
setTimeout(function() {
listen();
setupFilters();
}, 100);
$grid.shuffle({ /*************** RIGA 13 *************/
itemSelector: '[class*="col-"]',
sizer: $sizer
});
},
setupFilters = function() {
var $btns = $filterOptions.children();
$btns.on('click', function(e) {
e.preventDefault();
var $this = $(this),
isActive = $this.hasClass( 'active' ),
group = isActive ? 'all' : $this.data('group');
if ( !isActive ) {
$('.galleria-filter li a').removeClass('active');
}
$this.toggleClass('active');
$grid.shuffle( 'shuffle', group );
});
$btns = null;
},
listen = function() {
var debouncedLayout = $.throttle( 300, function() {
$grid.shuffle('update'); /*************** RIGA 41 *************/
});
$grid.find('img').each(function() {
var proxyImage;
if ( this.complete && this.naturalWidth !== undefined ) {
return;
}
proxyImage = new Image();
$( proxyImage ).on('load', function() {
$(this).off('load');
debouncedLayout();
});
proxyImage.src = this.src;
});
setTimeout(function() {
debouncedLayout();
}, 500);
};
return {
init: init
};
}( jQuery ));
$(document).ready(function()
{
shuffleme.init();
});
Riuscite a vedere cosa c'è che non va?