Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Lightbox imágenes sobrepuesta

  • 08/09/2010
  • 1:07 am
  • marcofbb

Lightbox es un script para mostrar imágenes sin abrir popups u otra ventana en el navegador, este script lo que hace es mostrar la imagen sobre tu web. Al darle click sobre la imagen automáticamente se pone todo el fondo negro trasparente y la imagen arriba.

Imagen

Incluir los siguientes códigos en el head de tu html

<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>

El siguiente paso es incluir la hoja de estilos para que Lightbox tenga la apariencia deseada, para ello incluimos los estilos en el header del html que estamos creando.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Y como ultimo paso agregarle rel="lightbox" a los enlaces que deseamos que abran una ventana flotante con la imagen.
De la siguiente manera

<a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>

Acá utilizamos un enlace pero fácilmente se puede hacer con imágenes ya sea la original o miniaturas. Para mostrar un conjunto de imágenes debemos agregar un nombre de grupo entre corchetes [].
El código quedara así

<a href=”image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
 
<a href=”image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
 
<a href=”image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>

Vista previa

Descargar

Share

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Total de Comentarios: 2

Avatar
08/09/2010
1:10 am

Información Bitacoras.com...

Valora en Bitacoras.com: Lightbox es un script para mostrar imágenes sin abrir popups u otra ventana en el navegador, este script lo que hace es mostrar la imagen sobre tu web. Al darle click sobre la imagen automáticamente se pone todo el fondo ne......

Avatar
Manuel Luna
18/11/2010
12:10 am

este script se puede usar en conjunto con los plugins de jquery o no?


Enviar Comentario

(*)

(*)