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