jQuery NailThumb – Crea vista miniatura de cualquier imagen

Soluciones con jQuery de galerías de imágenes con vistas en miniatura hay para todos los gustos y necesidades, como por ejemplo:

• Contenido

  • 1 Fotoramajs – Galería de imágenes jQuery con vistas miniaturas
  • 2 Skitter – Impresionante slideshow jQuery con vistas miniaturas
  • 3 jYouTube – Plugin jQuery para mostrar vistas miniaturas de videos
  • 4 Código de ejemplo para impletar NailThumb:
    • 4.1 1 Enlazar archivos:
  • 5  
  • 6 1.
    • 6.1 2 Definir estilos con CSS:
    • 6.2 3 Definir clases en las imágenes:
    • 6.3 Para esto hay que agreagar en <a>: class="square-thumb" rel="shadowbox
  • 7 jQuery NailThumb

  Fotoramajs – Galería de imágenes jQuery con vistas miniaturas

• Skitter – Impresionante slideshow jQuery con vistas miniaturas

• jYouTube – Plugin jQuery para mostrar vistas miniaturas de videos

Pero si lo que se necesita es crear vista miniaturas de cualquier imagen la solución es NailThumb.

NailThumb es un plugin jQuery para crear vistas miniaturas de cualquier imagen. Además de ser muy fácil de implementar en cualquier desarrollo, se destaca por amplia cantidad de opciones de personalización que incluyen:

• Crear vistas cuadradas, apaisadas u horizontales o verticales.
• Crear vistas recortando, redimensionando o escalando la imagen.
• Y también seleccionar efectos transición y controlar la dirección.

Código de ejemplo para impletar NailThumb:

1 Enlazar archivos:

Para esto se debe agregar en : class=”square-thumb” rel=”shadowbox

 

1 de 1

- +

1.

2 Definir estilos con CSS:

<style type="text/css" media="screen">
.square-thumb {
width: 150px;
height: 150px;
background-image: url("path/to/loadingplaceholder");
background-position: center center;
background-repeat: no-repeat;
}
</style>

3 Definir clases en las imágenes:

Para esto hay que agreagar en <a>: class="square-thumb" rel="shadowbox

4 Script que le da vida:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.square-thumb').nailthumb({
imageCustomFinder: function(el){
var image = $('<img />').attr('src',el.attr('href').replace('/full/','/small/')).css('display','none');
image.attr('alt',el.attr('title'));
el.append(image);
return image;
},
titleAttr:'alt'
});
Shadowbox.init();
});
</script>

jQuery NailThumb

Website: www.garralab.com/nailthumb.php

Demo: www.garralab.com/nailthumb-demo.php

Vía: www.webappers.com