Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: JonaLamper en 12 Agosto 2016, 21:29 pm



Título: AYUDA librería Isotope (JS/jQuery)
Publicado por: JonaLamper en 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/ (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
  1. <!DOCTYPE html>
  2.        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  3.        <script src="js/jquery.isotope.min.js"></script>
  4.        <script>
  5.            $(function () {
  6.                var $container = $('#container');
  7.                $container.isotope({
  8.                    itemSelector: '.element'
  9.                });
  10.  
  11.                $('#filters a').click(function () {
  12.                    var selector = $(this).attr('data-filter');
  13.                    $container.isotope({filter: selector});
  14.                    return false;
  15.                });
  16.            });
  17.        </script>
  18.    <body>
  19.        <ul id="filters">
  20.            <li><a href="#" data-filter="*">Mostrar Todo</a></li>
  21.            <li><a href="#" data-filter=".seat">Seat</a></li>
  22.            <li><a href="#" data-filter=".peugeot">Peugeot</a></li>
  23.            <li><a href="#" data-filter=".renault">Renault</a></li>
  24.            <li><a href="#" data-filter=".citroen">Citroen</a></li>
  25.            <li><a href="#" data-filter=".opel">Opel</a></li>
  26.        </ul>
  27.  
  28.        <div id="container">
  29.            <div class="element seat metal">Coche Seat</div>
  30.            <div class="element peugeot metal">Coche Peugeot</div>
  31.            <div class="element renault metal">Coche Renault</div>
  32.            <div class="element citroen metal">Coche Citroen</div>
  33.            <div class="element opel metal">Coche Opel</div>
  34.        </div>
  35.    </body>
  36. </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/ (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  :(


Título: Re: AYUDA librería Isotope (JS/jQuery)
Publicado por: karmany en 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.


Título: Re: AYUDA librería Isotope (JS/jQuery)
Publicado por: JonaLamper en 14 Agosto 2016, 00:23 am
Buena idea, no lo había pensado.


Gracias.