Generar automáticamente una grilla de imágenes con jQuery (estilo Tumblr)

por .

Photoset grid es un plugin jQuery para crear set de imágenes en formato de grilla de manera automática y sin apenas modificar el código fuente de nuestro sitio.

El autor de esta pequeña biblioteca confiesa que se inspiro fuertemente en Tumblr para realizar este trabajo, el resultado es muy similar al de la red social, inclusive sus funcionalidades están muy bien logradas.

La gran ventaja que devienen de utilizar este plugin es que genera la grilla de imágenes sin la necesidad de realizar este trabajo manual. Dentro de sus principales características podemos destacar que funciona perfectamente independiente de la resolución utilizada por el visitante.

grid de imagenes con jQuery

Si hablamos de las opciones disponibles de este plugin podemos remarcar que puede vincularse con otras bibliotecas muy famosas de forma sencilla, inclusive efectos ya conocidos por todos nosotros como por ejemplo el clásico lightbox.

Ejemplo de uso:

HTML:

<div class="photoset-grid-custom" style="visibility: hidden;">
  <img src="print1-500px.jpg" data-highres="print1-highres.jpg">
  <img src="print2-500px.jpg" data-highres="print2-highres.jpg">
  <img src="print3-500px.jpg" data-highres="print3-highres.jpg">
</div>

JAVASCRIPT:

$('.photoset-grid-custom').photosetGrid({
  // Set the gutter between columns and rows
  gutter: '5px',
  // Manually set the grid layout
  layout: '21',
  // Wrap the images in links
  highresLinks: true,
  // Asign a common rel attribute
  rel: 'print-gallery',

  onInit: function(){},
  onComplete: function(){
    // Show the grid after it renders
    $('.photoset-grid-custom').attr('style', '');
  }
});

Eso es todo, difícil encontrar una complicación para utilizar este buen plugin jQuery. No obstante cualquier problema que tengan no duden en utilizar los comentarios de esta entrada 😀

Web: Photoset grid

Categorizado en: