Shuffle.js non mi funziona generando errori "is not a function"

**Alhazred** · 13-06-2016, 12:49

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?

**Alhazred** · 13-06-2016, 13:03

Per l'errore sul file shuffle.js ho risolto, avevo messo il link al file sbagliato.
Restano i 2 errori sulla funzione non definita.

**Alhazred** · 13-06-2016, 15:46

La situazione migliora, ho preso il file shuffle.min.js da un progetto funzionante online e adesso non ho più quegli errori, ma comunque i filtri non funzionano, cliccandoci non succede niente, continuo a vedere che riesco a fare.

**Alhazred** · 13-06-2016, 21:12

Ho risolto il problema cambiando i pulsanti in questo modo

codice:

<div id="filter" class="galleria-filter text-center">
    <a class="btn btn-default active" href="#" data-group="all">Tutti</a>
    <a class="btn btn-default" href="#" data-group="chiari">Chiari</a>
    <a class="btn btn-default" href="#" data-group="scuri">Scuri</a>
</div>

Discussione: Shuffle.js non mi funziona generando errori "is not a function"

Strumenti discussione

Ricerca discussione

Visualizza

Shuffle.js non mi funziona generando errori "is not a function"

Permessi di invio