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:
<!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/ (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 :(
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.
Buena idea, no lo había pensado.
Gracias.