Seguramente conocerán Snap Shots, un servicio online que nos permite generar vistas previas de los enlaces que se dirigen a una Web determinada. Pues hoy en cssglobe puedo ver un simple Script jQuery que nos permitirá básicamente lograr algo similar, pero personalizado a nuestro gusto y sin necesidad de contar con servicios externos, algo que siempre es una ventaja. Con este script podremos generar tooltip-burbuja como pop-ups y vistas previas, algo que será útil para mostrar las previas de ciertos enlaces externos o bien como alternativa para mostrar nuestro porfolio desde nuestro sidebar.
Mas info y descarga cssglobe - Tooltip and Image Preview Using jQuery
Instalación:
Lo primero será descargar nuestras librerías y realizar las llamadas desde nuestro encabezado, copiamos y pegamos el siguiente código dentro de nuestras etiquetas < head > …..< / head >
<script src="main.js" type="text/javascript"></script>
Uso
Generar tooltip simples - DEMO
Un poco de estilo
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
/* */
Luego, Añadimos la clase "tooltip" a nuestros link y utilizamos el atributo “title” para añadir información que mostraremos al generar nuestros tooltip.
Usandolo en imagenes - DEMO
estilo
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
Luego, Añadimos la clase "preview" a nuestros imágenes. Vale recordar utilizar dos imágenes, una como miniatura y otra en tamaño real.
Para añadir una descripción a nuestras imágenes, volvemos a hacerlo utilizando el atributo “title”
Generar screenshot: similar ha snapshots - DEMO
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
Uso
Añadimos la clase "screenshot" a nuestros enlaces, y la propiedad “rel” para llamar nuestra imagen. Rel ="cssg_screenshot.jpg"
Para añadir una descripción, nuevamente damos uso a la propiedad “title”
Loading ...
Markos
09-05-2008
Permalink
Ésto podría ahorrar espacio en descripciones y demás;excelente
daniel
09-05-2008
Permalink
Hmmm pensaba que realmente hacia un screnshot. Pero resulta que le tienes q adjuntar la miniatura.
Ronny
09-05-2008
Permalink
Muy bonitos todos los scripts, estaba buscando por todos lados scripts similares.