0

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.

Update.

<div class="categorias" id="categorias">

                        <a href="#" class="text"> All Categories</a>
                        <a href="#">Graphic Design</a>
                        <a href="#">Web Design</a>
                        <a href="#">Sketches</a>

                    </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>

Codigo 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.

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 las categorías que fueron seleccionadas, lo único que logro es que me traiga una sola categoría.

Alguna idea?

Documentacion: https://haltu.github.io/muuri/

Completo-portafolio Categoria GraphicDesign

nota: Las imagenes estan pegadas, la pagina no es asi.

1 respuesta 1

0

Podrías hacer que cada vez que cambie la URL se obtenga algun extracto de la misma y con eso modificar la linea

grid.filter('[data-categoria="GraphicDesign"]');

por algo como

grid.filter('[data-categoria="' + extractoDeURL + '"]');

y que cada vez que cambie la URL se ejecute esa linea

por ej:
suponiendo que cambia el pathname (/DireccionDeArchivo) de la web

if(("onhashchange" in window) && navigator.userAgent.toLowerCase().indexOf('msie') == -1){
    window.onhashchange = function(){
        var path = window.location.pathname.substring(1);//el substring(1) es para quitarle la / del inicio
        grid.filter('[data-categoria="' + path + '"]');
    }
}

suponiendo que cambie el hash (#IdDeElemento) de la web

if(("onhashchange" in window) && navigator.userAgent.toLowerCase().indexOf('msie') == -1){
    window.onhashchange = function(){
        var hash = window.location.hash.substring(1);//el substring(1) es para quitarle el # del inicio
        grid.filter('[data-categoria="' + hash + '"]');
    }
}
1
  • Hola buenas tardes, gracias por contestar. Amigo queria preguntarte si esta recomendación puede ser aplicada a este tipo de portafolio. Edite la pregunta para que puedes 2 imágenes.. el 5 feb. 2020 a las 16:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.