Generar vistas previas y tooltip con jquery
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="jquery.js" type="text/javascript"></script>
-
<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.
-
<a href="http://xyberneticos.com" class="tooltip" title="Visitar xyberneticos">Demo tooltip simple </a>
Usandolo en imagenes - DEMO
estilo
-
#preview{
-
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
-
#screenshot{
-
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"
-
<a href="http://www.xyberneticos.com" class="screenshot" rel="xyber_screenshot.jpg">xyberneticos</a>
Para añadir una descripción, nuevamente damos uso a la propiedad “title”
-
<a href="http://www.xyberneticos.com" class="screenshot" rel="xyber_screenshot.jpg" title="xyberneticos: recursos y tips">xyberneticos</a>
Markos said,
Wrote on May 9, 2008 @ 3:07
Ésto podría ahorrar espacio en descripciones y demás;excelente
daniel said,
Wrote on May 12, 2008 @ 8:11
Hmmm pensaba que realmente hacia un screnshot. Pero resulta que le tienes q adjuntar la miniatura.