Esta librería tiene algunas estructuras que tanto html y js que se deben seguir para poder llegar acabo sus animaciones,
En este caso estoy tratando de realizar el proceso de filtrado con grid.filter().
Código html: En este caso, estoy usando el parámetro "data-(atributo)" para llamar a las categorías por su atributo es justo data-categoria="" ya que los demás son otros atributos que usare en otro momento.
HTML:
Código
<div class="categorias" id="categorias"> </div> </div> <div id="contenedor2"> <section class="grid" id="gridjs"> <div class="item" data-categoria="GraphicDesign" data-tipo="Graphic design PSD illustrator art comic" data-description="Art | PSD | illustrator"> <div class="item-content"> <img src="imgport/Alaz.png" alt=""> </div> </div> <div class="item" data-categoria="GraphicDesign" data-tipo="Graphic designart PSD illustrator art comic" data-description="Art illustrator Comic"> <div class="item-content"> <img src="imgport/alaz3.png" alt=""> </div> </div> <div class="item" data-categoria="GraphicDesign" data-tipo="Graphic design art PSD music party" data-description="Photo | PSD | Party"> <div class="item-content"> <img src="imgport/Photo-Enveroiment.png" alt=""> </div> </div> <div class="item" data-categoria="GraphicDesign" data-tipo="Graphic design Photo person PSD stone" data-description="Photo | illustrator | fresh air" class="GraphicDesign"> <div class="item-content"> <img src="imgport/Mujer.png" alt=""> </div> </div> <div class="item" data-categoria="GraphicDesign" data-tipo="Graphic design art PSD comic " data-description=" Art | illustrator - PSD | City"> <div class="item-content"> <img src="imgport/Photo - City.png" alt=""> </div> </div> <div class="item" data-categoria="WebDesign" data-tipo="Sketches Website Boceto" data-description=" Briefcase design | Website"> <div class="item-content"> <img src="imgport/Web-design.png" alt=""> </div> </div> <div class="item" data-categoria="Sketches" data-tipo="Sketches Website Boceto" data-description=" Briefcase design | Website"> <div class="item-content"> <img src="imgport/Sketche.png" alt=""> </div> </div>
Código JS: La librería tiene diferentes formas de ser ejecuta, en tal caso lo único que busco es cuando le de a los enlaces, estos me devuelvan solo las imágenes de esa categoría seleccionada.
Código
const grid = new Muuri('.grid', { layout: { rounding: false } }); window.addEventListener('load', () => { grid.refreshItems().layout(); document.getElementById('gridjs').classList.add('loadimg'); /*Carga todas las imagenes con una pequeña transicion css*/ const enlace = document.querySelectorAll('#categorias a'); enlace.forEach((catego) => { /*Obtengo las categorias por medio queryselector y luego paso un foreach para ir recogiendo las imagenes respectivas*/ catego.addEventListener('click' , (evento) => { evento.preventDefault(); console.log(enlace); grid.filter('[data-categoria="GraphicDesign"]'); /*Obtengo solo las categorias las imagenes de GraphicDesign*/ }); }); });
Si alguien ha trabajado con esta librería, queria saber como puedo filtrar las imágenes cuando le haga click a un enlace y que solo me traiga la categoría que fue seleccionada y me devuelva solo los atributos que contenga esa categoría. Lo único que logro es que me traiga una sola categoría.
Alguna idea?
Documentacion: https://haltu.github.io/muuri/
IMG de muestra: https://i.stack.imgur.com/hUhPp.jpg
Cuando las categorias se desaparecen y solo trae la categoría de GraphicDesign: https://i.stack.imgur.com/Trlh1.jpg