previusjquerylink.jpg

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 >

PLAIN TEXT
JavaScript:
<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

PLAIN TEXT
CSS:
/*  */

#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.

PLAIN TEXT
HTML:
<a href="http://xyberneticos.com" class="tooltip" title="Visitar xyberneticos">Demo tooltip simple </a>

Usandolo en imagenes - DEMO
estilo

PLAIN TEXT
CSS:
#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.

PLAIN TEXT
HTML:
<a href="1.jpg" class="preview"><img src="1s.jpg" alt="Miniatura" /></a>

Para añadir una descripción a nuestras imágenes, volvemos a hacerlo utilizando el atributo “title”

PLAIN TEXT
HTML:
<a href="1.jpg" class="preview" title="Aquí estará tu descripción"><img src="1s.jpg" alt=" thumbnail" /></a>

Generar screenshot: similar ha snapshots - DEMO

PLAIN TEXT
CSS:
#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"

PLAIN TEXT
HTML:
<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”

PLAIN TEXT
HTML:
<a href="http://www.xyberneticos.com" class="screenshot" rel="xyber_screenshot.jpg" title="xyberneticos: recursos y tips">xyberneticos</a>