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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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