Portafolio Dinámico y Filtrable con jQuery Isotope

jQuery cambio totalmente la forma de hacer las cosas en la web, aunque antes teníamos  JavaScript no resultaba nada fácil conseguir los resultados que podemos tener al utilizar un plugin de esta librería.  En jQuery encontramos muchos plugin que nos harán las tarea complicadas y nos darán excelentes resultados fácilmente.

Uno de ellos es el excelente plugin jQuery Isotope de metafizzy que nos ayudaran a crear portafolios filtrables o mostrar contenidos de forma dinámica.

En este tutorial vamos a crear un portafolio filtrable con este plugin jQuery tal cual vemos en paginas o portafolios de alta calidad o de plantillas Premium. Esto lo podemos utilizar para presentar trabajos, presentar portafolio o cualquier proyecto donde queramos hacer un filtro dinámico con diferentes categorías.

Portafolio-Dinamico-y-Filtrable-con-jQuery-Isotope

Este plugin lo podemos utilizar de forma gratuita para proyectos personales que no sean comerciales, de esta forma lo podemos utilizar bajo la licencia GPL v3.  Pero si lo que queremos es utilizar este plugin de forma comercial o para crear algo que nos lucre, tendremos que comprar la licencia comercial que puede ser como desarrollador o como organización. Pero en este tutorial lo utilizaremos de forma gratuita ya quiero mostrarte como trabaja esta herramienta y como pueden evolucionar nuestros proyectos con los diferentes plugins de jQuery.

Vamos con el HTML.

Y lo primero que hacemos es descargar el plugin y vincularlo al documento HTML.

En este caso, descargamos el plugin y lo vinculamos dentro del sitio y tambien vinculamos la libreria jQuery desde su CDN

En el anterior <script> lo que hacemos es inicializar las el plugin y adicionalmente agregamos algunas funciones que afectaran el comportamiento de este, por ejemplo el tipo de animación, la duración el evento que desatara la función general entre otras. Las básicas las podemos encontrar en la documentación de este plugin.

Ok, esto es muy fácil, en el HTML tenemos dos divisiones, primero el <div class=”filtrar”> y dentro unos enlaces y cada uno con el atributo data-filter y de valor le damos una clase por la cual haremos el filtro de los div  dependiendo de cada categoría, y primero tenemos el selector universal (*) que nos mostrara todas las categorías, después tenemos las clases .web, .grafico, .apps y .comunes y estas son las clase que tendrán los div que están en el cuerpo del portafolio y que nos servirán para hacer el filtro dependiendo a la que elijamos en el enlace.

Como puedes ver el elemento clave para el funcionamiento de este plugins en este caso, es el atributo data-filter ya que los elementos que coincidan con cada uno sera el que se muestre en el filtro.

Y en la segunda parte tenemos el cuerpo de nuestro portafolio dentro del  <div class=”portfolioContenedor”> y dentro tenemos los diferentes divs cada uno con una clase diferente referenciando el tipo de categoría a la que pertenece, pueden ser web, gráficos, apps o comunes y dentro de los divs tenemos las imágenes que se mostraran dependiendo también de su categoría.

Aplicamos los CSS

Como te puedes dar cuenta las clases son básicas y pocas, pero aun así nos ayudaran a poner en funcionamiento nuestro portafolio. Primero tenemos los estilos que se aplican a la al div filtrar donde están los enlaces, luego a las imágenes y finalmente aplicamos unos estilos a ciertas clases que se generan con el plugin en funcionamiento y bueno aplicamos  transiciones de CSS3 para crear un efecto agradable al momento del filtro.

Tenemos un portafolio filtrable creado con jquery y jquery isotope plugin de una manera fácil y rápida. Ahora, claro que podemos extender el funcionamiento y la apariencia de este portafolio, utilizando mas CSS o un poco mas de script obtendremos resultados increíbles, pero esto te lo dejo a ti y a tu imaginación, solo quería enseñarte este plugin y mostrarte como funciona.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

5 Respuestas

  1. Jorgito dice:

    Yo utilizo para esto jQuery Quicksand, también es muy bueno.

  2. Mañe dice:

    Que bueno Johanso, Justo lo que estaba buscando. Gracias.

  3. AlFander dice:

    Que bueno caballero..

  1. marzo 9, 2014

    Que bueno caballero..