Librería JavaScript Isotope ¿Cómo cargar un selector concreto al iniciar?
Hola compis, tengo esta librería JS en la web que me estoy montando. Sirve para filtrar elementos, en mi caso imágenes.
Cuando carga por defecto muestra todas las imágenes, me podríais guiar en el código para que, por ejemplo, me cargara solo los GIF al iniciar.
Muchísimas gracias :)
urquizar
Um este es el código que tengo
urquizar
El HTML es
En Stack Overflow dan la solución de dividir y hacer dos llamadas una carga Isotope y la otra carga el filtro lo que sucede es que comprendo el concepto pero no se portarlo a mi código
¿Alguien lo ve?
Gracias
emilianomontani Mod
Hola.
No sé si te sirve mi comentario, porque pasó un tiempo ya.
Hice unas pruebas con la tabla periódica del ejemplo de la librería, con la idea de iniciar con solo algunos elementos.
Primero en una función $( document ).ready(function()
seleccioné todos los elementos y le apliqué una clase para ocultarlos:
Por ejemplo: $('.grid div').addClass('none');
Luego en la hoja de estilo definí que esa clase sea invisible.
Siguiente, con un querySelectorAll elegí los elementos que quería mostrar, en mi caso los que tenían la palabra "transition"
Por ejemplo: let metal = document.querySelectorAll('.transition');
Es útil aplicar un console para ver si traes los datos correctos. En este caso escribí: console.log(metal);
Los valores que traían eran los correctos y le apliqué un addClass para visualizar solo las que tienen esa palabra y luego los ordené en la grilla para que no se vean huecos.
por ejemplo: $(metal).addClass('ver');
En tu caso si lo haces con la extensión o le agregas una clase a las imágenes que te interesa mostrar primero, podría funcionar. Quizás no es la opción más optima porque soy principiante con JavaScript, pero creo que quizás te sirve como una especie de solución.
Luego me dirás.
¡Un saludo!
urquizar
Holala, acabo de terminar de resolverlo, dejo el HTML y JS usado para quien le pueda servir.
Saludos.