Visor de thumbnails

Genial visor de thumbnail que se puede aplicar a cualquier enlace de la página en la que trabajamos, su interfaz es secilla y clara, su uso es tan sencillo cómo añadir a la propiedad rel la palabra thumbnail (rel=”thumbnail”).

Este visor es un script que mostrará la imagen en el centro de la pantalla y de manera opcional le añadira algún comentario atribuyéndole un “title”.

¿Cómo utilizarlo?

Para utilizarlo necesitas estos tres archivos:

• thumbnailviewer.css
• thumbnailviewer.js
• loading.gif (pequeño gif mostrado en la carga de la imagen)

Una vez los tengas, sólo debes añadir esta pequeña cabecera en la página en la que lo vayas a utilizar:

<link rel=”stylesheet” href=”thumbnailviewer.css” type=”text/css” />
<script src=”thumbnailviewer.js” type=”text/javascript”>
</script>

y para las imágenes:

<a href=”/images/gmail-almacenamiento.png” rel=”thumbnail” title=”Esto es un ejemplo”>Imagen Google</a>

Ejemplo

Prueba haciendo click en alguno de los dos enlaces (Texto o Imagen)


Imagen Google

Y para direcciones utiliza este otro javascript

Un pequeño script en Javascript acompañado de una ligera hoja de estilos, que mostrara una imagen previa a cada uno de tus enlaces, una vez sitúas el raton por encima del enlace se mostrará una pequeña imagen de la página de destino.

Puedes descargarte el código en lasb.arc90.com en tres sencillos pasos podrás conseguir este atractivo resultado en tu página:

Configuración

Enlaza los scripts en el código de tu página
Añade la clase en cada uno de los enlaces que desees
O si lo prefieres pon por defecto thumbnails en todos tus enlaces

Puedes utilizar este simple ejemplo para ver como funciona.

Ejemplos de enlaces con Link Thumb

www.google.com | www.yahoo.com | www.microsiervos.com | www.barrapunto.com

Compatible con:

* Internet Explorer 6.0+
* Mozilla Firefox 1.5+
* Apple Safari 2.0
* Opera Version 8.51+

Enlaces Relacionados

Generar passwords accesibles con Php
Codigo Fuente del generador de passwords en PHP
Ejemplo de ejecución del script
PHP y MySql una estrecha relación
5 cosas que no sabías hacer con PHP
Generar documentos OpenOffice con PHP
Nueva versión de Notepad++
Hola Mundo!
Identificar las consultas más lentas de MySql
Crea sencillas gráficas con MySql
Programar un script PHP para saber quién está en línea
Consejos para optimizar PHP
Editando en Opera páginas web en tiempo real