23 agosto 2010

Generar imágenes de vista previa al pasar por los links


screenshot

Este es uno de los códigos más interesantes y útiles que he conseguido sacar. Personalmente me resulta muy útil y vistoso.

Para ver en acción el efecto, poner el puntero del ratón en los links de mi sidebar (los que están en la parte más azul).

Para implantarlo en vuestro blog debéis hacer lo siguiente.

  1. Colocar los scripts necesarios en vuestra plantilla
  2. Colocar el código CSS en vuestra plantilla
  3. Colocar el código a los links que vayan a generar vista previa (una clase y la url del servicio websnap)

Paso 1. Colocar los scripts en la plantilla:

  • Copiar el código y poner justo por encima de </body>
  • Conviene que descarguéis los scripts y los subáis a vuestro propio servidor, ya que no puedo asegurar que permanezcan online los que yo misma he subido. Si no tenéis servidor para este tipo de archivos podéis usar http://www.opendrive.com que ofrecen 5GB gratis.

Código Javascript

<script language='JavaScript' src='http://www.opendrive.com/files/6972074_SfG13/jquery.js' type='Text/JavaScript'></script>
<script language='JavaScript' src='http://www.opendrive.com/files/6972120_X0FwO/main-thumb.js' type='Text/JavaScript'></script>
Paso 2. Colocar el código CSS en vuestra plantilla:
  • Copiar el código y poner justo encima de ]]></b:skin>
#previa{
position:absolute;
border:1px solid #000;
background:#111;
padding:5px;
display:none;
color:#fff;
}
Paso 3. Colocar el código en los links:
<a class="previa" href="la_url_del_enlace"  rel=http://images.websnapr.com/?url=la_url_del_enlace">Texto del link</a>
En resumen, una vez hechas las modificaciones correspondientes en la plantilla, se trata de incluir en los links que van a generar imagen previa la parte marcada en rojo.

Consejo: conviene que tengáis el código que se usa para los links en un .txt y a mano, eso os facilitará la tarea de recordar lo que hay que poner o simplemente podéis copiar/pegar y cambiar las url.

Nota: Cómo podéis comprobar uno de los scripts en la librería jQuery, si ya tenéis esta libreria en vuestra plantilla, no es necesario colocarla de nuevo. En este caso sólo sería necesario poner en la plantilla el script main-thum.js

Cómo descargar y guardar los scripts:

Click en los links y en el menú del navegador click en "Archivo" > "Guardar como..."

3 comentarios:

M.A.G. on 23 de septiembre de 2012, 3:29 dijo...

Hola malina ..No entiendo nada, este efecto quiero colocarlo en blogger solo copio y pego en la plantilla ... pero para que descargar si no se necesita en blogger. Lo puebo y te digo. mil gracias la única pagina que lo tiene. genial!!!

Malina on 23 de septiembre de 2012, 9:30 dijo...

@M.A.G. hola, éste código ya no está funcionando correctamente. Si te fijas en mi sidebar, en la zona azul de links se genera la captura pero no se ve el sitio. Websnapr necesita ahora de otros requisitos (clave de permiso) para generar la vista previa en miniatura.

Saludos

M.A.G. on 25 de septiembre de 2012, 22:17 dijo...

Gracias por responder. saludos desde Argentina

Publicar un comentario

Hola, por favor se amable, deja tu nombre y si necesitas respuesta suscribete al comentario ya que te responderé aquí mismo.

@>-,´-: MaLiNa

 

Copyright 2008 | Design by Somos Marca