AYUDA librería Isotope (JS/jQuery)

JonaLamper · 12 Agosto 2016, 21:29 PM

Gente, me voy a tirar por la ventana. Llevo horas probando decenas de ejemplos por Internet y no me funciona ninguno $:-\$ Estoy estudiando la librería Isotope con la que puedes filtrar, ordenar, etc.

Después de ver muchas, he cogido como ejemplo una sencilla, esta: http://www.jose-aguilar.com/scripts/jquery/isotope/

Estoy intentando recrear eso, pero no sé por qué ~~narices~~ no funciona. Aquí mi código:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="js/jquery.isotope.min.js"></script>
        <script>
            $(function () {
                var $container = $('#container');
                $container.isotope({
                    itemSelector: '.element'
                });

                $('#filters a').click(function () {
                    var selector = $(this).attr('data-filter');
                    $container.isotope({filter: selector});
                    return false;
                });
            });
        </script>
    <body>
        <ul id="filters">
            <li><a href="#" data-filter="*">Mostrar Todo</a></li>
            <li><a href="#" data-filter=".seat">Seat</a></li>
            <li><a href="#" data-filter=".peugeot">Peugeot</a></li>
            <li><a href="#" data-filter=".renault">Renault</a></li>
            <li><a href="#" data-filter=".citroen">Citroen</a></li>
            <li><a href="#" data-filter=".opel">Opel</a></li>
        </ul>

        <div id="container">
            <div class="element seat metal">Coche Seat</div>
            <div class="element peugeot metal">Coche Peugeot</div>
            <div class="element renault metal">Coche Renault</div>
            <div class="element citroen metal">Coche Citroen</div>
            <div class="element opel metal">Coche Opel</div>
        </div>
    </body>
</html>

O sea, ¿qué demonios me está faltando? ¡No lo entiendo!

He seguido estas instrucciones: http://www.jose-aguilar.com/blog/isotope-un-plugin-jquery-exquisito-para-disenos-magicos/

Posdata: Si no conseguís arreglarlo, que al menos alguien me pase uno que funcione... Porque cuando los intento ejecutar en mi ordenador, no va ninguno

karmany · 14 Agosto 2016, 00:15 AM

Solo lo he mirado por encima y posiblemente el código HTML no esté correctamente escrito.

Yo te recomiendo una cosa que acabo de probar y funciona perfectamente. Descárgate el ejemplo original de la página web a tu ordenador y pruébalo (yo lo he descargado desde Chrome > guardar como web completa).
A mí me funciona perfecto. Y a partir de ahí, modifica el código HTML y ve probando hasta adaptarlo a tu web.

Te lo digo porque el código HTML es muy básico y sencillo y se puede modificar en 5 minutos a tu ejemplo.

JonaLamper · 14 Agosto 2016, 00:23 AM

Buena idea, no lo había pensado.

Gracias.

Test Foro de elhacker.net SMF 2.1

AYUDA librería Isotope (JS/jQuery)

JonaLamper

karmany

JonaLamper