Lightbox 2, adios a los pop´ups
Hace tiempo que esta dando vueltas en la red y siendo utilizado por miles de sitios así está entrada va dirigida para los que no conocían sobre este genial script escrito en javascript por Lokesh Dhakar, permite mostrar ventanas emergentes con un efecto visual espectacular para la vista resaltando la imagen sobre la página en cuestión que permite agregar más dinámica a tu sitio, vea un ejemplo como funciona, además tiene funcionalidades como las de transición y descripciones de la imagen.
Instrucciones para usarlo.
Para usarlo tenes que bajarlo luego descomprimir el archivo y pones las carpetas en el directorio raiz de tu sitio.
Insertas estas lineas en el head de tu sitio.
-
<script src="http://microoweb.com/wp-admin/js/prototype.js" type="text/javascript"><!--
-
mce:0-->
-
// --></script>
-
<script src="http://microoweb.com/wp-admin/js/scriptaculous.js?load=effects" type="text/javascript"><!--
-
mce:1-->
-
// --></script>
-
<script src="http://microoweb.com/wp-admin/js/lightbox.js" type="text/javascript"><!--
-
mce:2-->
-
// --></script>
-
<pre lang="css">
Luego para apuntar el efecto a la imagen en miniatura que deseas, usas el atributo rel="lightbox" en el enlace que apuntará a tu imagen, vean el siguiente ejemplo:
-
<a title="my caption" rel="lightbox">
-
</a>
-
href="http://microoweb.com/wp-admin/images/image-1.jpg">image #1
Luego para hacer las transiciones de una imagen a otra tenes agregar el atributo rel="lightbox[roadtrip]" en en enlace, vean el siguiente ejemplo:
-
<a rel="lightbox[roadtrip]" href="http://microoweb.com/wp-admin/images/image-1.jpg">image #1</a>
-
<a rel="lightbox[roadtrip]" href="http://microoweb.com/wp-admin/images/image-2.jpg">image #2</a>
-
<a rel="lightbox[roadtrip]" href="http://microoweb.com/wp-admin/images/image-3.jpg">image #3</a>
Para agregar una descripción a la imagen apuntada tenes agregar el siguiente atributo title="Esta es mi flor"
-
<a title="Esta es mi flor" rel="lightbox" href="http://microoweb.com/wp-admin/images/image-1.jpg">image #1</a>
Tips: Podes con un programa de edición, traducir a tu manera las imagenes de los botones Close, Prev, Next
Descargar Lightbox 2 - Página oficial
