elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Galeria de imagenes grid.filter (librería Muuri) - Filtrado de img al hacer clic
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Galeria de imagenes grid.filter (librería Muuri) - Filtrado de img al hacer clic  (Leído 473 veces)
EnderJava

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Galeria de imagenes grid.filter (librería Muuri) - Filtrado de img al hacer clic
« en: 6 Febrero 2020, 04:42 am »

Hola que tal? En esta oportunidad estoy realizando un pequeño portafolio web y buscando un poco en internet me encontré con esta librería bastante interesante.

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
  1. <div class="categorias" id="categorias">
  2.  
  3.                        <a href="#" class="text"> All Categories</a>
  4.                        <a href="#">Graphic Design</a>
  5.                        <a href="#">Web Design</a>
  6.                        <a href="#">Sketches</a>
  7.  
  8.                    </div>
  9. </div>
  10. <div id="contenedor2">
  11. <section class="grid" id="gridjs">
  12.  
  13.  
  14.    <div class="item"
  15.  data-categoria="GraphicDesign"
  16.  data-tipo="Graphic design PSD illustrator art comic"
  17.   data-description="Art | PSD | illustrator">
  18.  
  19.    <div class="item-content">
  20.     <img src="imgport/Alaz.png" alt="">
  21.    </div>
  22.    </div>
  23.    <div class="item"
  24.    data-categoria="GraphicDesign"
  25.     data-tipo="Graphic designart PSD illustrator art comic"
  26.     data-description="Art  illustrator  Comic">
  27.    <div class="item-content">
  28.     <img src="imgport/alaz3.png" alt="">
  29.    </div>
  30.  </div>
  31.  
  32.  
  33.  <div class="item"
  34.  data-categoria="GraphicDesign"
  35.  data-tipo="Graphic design art PSD  music party"
  36.  data-description="Photo | PSD | Party">
  37.    <div class="item-content">
  38.     <img src="imgport/Photo-Enveroiment.png" alt="">
  39.    </div>
  40.  </div>
  41.  
  42.  <div class="item"
  43.  data-categoria="GraphicDesign"
  44.  data-tipo="Graphic design Photo person PSD stone"
  45.   data-description="Photo | illustrator | fresh air" class="GraphicDesign">
  46.    <div class="item-content">
  47.     <img src="imgport/Mujer.png" alt="">
  48.    </div>
  49.  </div>
  50.  
  51.  <div class="item"
  52.  data-categoria="GraphicDesign"
  53.  data-tipo="Graphic design art PSD comic "
  54.  data-description=" Art | illustrator - PSD | City">
  55.    <div class="item-content">
  56.     <img src="imgport/Photo - City.png" alt="">
  57.    </div>
  58.  </div>
  59.  
  60.  <div class="item"
  61.  data-categoria="WebDesign"
  62.  data-tipo="Sketches Website Boceto"
  63.  data-description=" Briefcase design | Website">
  64.    <div class="item-content">
  65.     <img src="imgport/Web-design.png" alt="">
  66.    </div>
  67.  </div>
  68.  <div class="item"
  69.  data-categoria="Sketches"
  70.  data-tipo="Sketches Website Boceto"
  71.  data-description=" Briefcase design | Website">
  72.    <div class="item-content">
  73.     <img src="imgport/Sketche.png" alt="">
  74.    </div>
  75.  </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
  1. const grid = new Muuri('.grid', {
  2.  
  3. layout: {
  4.  
  5.    rounding: false
  6. }
  7.  
  8.  });
  9.  
  10.  
  11. window.addEventListener('load', () => {
  12.  
  13. grid.refreshItems().layout();
  14. document.getElementById('gridjs').classList.add('loadimg'); /*Carga todas las imagenes con una pequeña transicion css*/
  15.  
  16. const enlace = document.querySelectorAll('#categorias a');
  17. enlace.forEach((catego) =>  {
  18.  
  19. /*Obtengo las categorias por medio queryselector y luego paso un foreach para ir recogiendo las imagenes respectivas*/
  20.    catego.addEventListener('click' ,  (evento) => {
  21.  
  22. evento.preventDefault();
  23.  
  24. console.log(enlace);
  25.  
  26.  
  27.    grid.filter('[data-categoria="GraphicDesign"]');
  28. /*Obtengo solo las categorias las imagenes de GraphicDesign*/
  29.  
  30. });
  31.  
  32. });
  33.  
  34. });
  35.  
  36.  

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


« Última modificación: 6 Febrero 2020, 04:57 am por EnderJava » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Galeria de imagenes
Diseño Gráfico
PhenfiX 8 3,048 Último mensaje 7 Noviembre 2004, 14:56 pm
por TaN€R
Necesito ayuda sobre hacer una galeria de imagenes
PHP
LostMortal 2 1,173 Último mensaje 27 Marzo 2014, 12:26 pm
por patilanz
[Pregunta]: ¿Como hacer una "foto galeria" sin saber cuantas imagenes serán?
Desarrollo Web
Leguim 2 671 Último mensaje 30 Diciembre 2018, 22:59 pm
por Leguim
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines