Este script te ayudará a mostrar las imágenes en tu espacio de una forma muy original.

La imágenes se muestran en la pantalla, delante del contenido con un sueve efecto y podemos ademas mostrar información entra en cada una de las imágnes.

Ver demo

Como usar Llightbox 2

Parte 1 - Configuración

1. Lightbox 2 utiliza el Prototype Framework y Scriptaculous Effects Library. Usted tendrá que incluir estos tres archivos Javascript en su cabecera (en este orden).

<script Type="text/javascript" src="js/prototype.js"> </ script> 

         
<script Type="text/javascript" 
src="js/scriptaculous.js?load=effects"> </ script> 

         
<script Type="text/javascript" src="js/lightbox.js"> </ script> 

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

<a Href="images/image-1.jpg" rel="lightbox" 
title="my caption"> imagen # 1 </ a> 

2. Si dispone de una serie de imágenes relacionadas entre sí podría querer mostrarlas en grupo, siga el paso uno, pero además, incluir un nombre de grupo entre corchetes en el atributo rel. Por ejemplo:

<a Href="images/image-1.jpg" rel="lightbox[roadtrip]"> 
imagen # 1 </ a> 


<a Href="images/image-2.jpg" rel="lightbox[roadtrip]"> 
imagen # 2 </ a> 


<a Href="images/image-3.jpg" rel="lightbox[roadtrip]"> 
imagen # 3 </ a> 
  

No hay límites en el número de imagenes por página o el número de imágenes por grupo.

---

Añade este artículo a tu marcador social favorito

TrackBack URI for this entry

Comentarios (4)

RSS feed Comments

Mostrar/Ocultar comenarios

una pregunta
escrito por arosales, mayo 13, 2008

No hay límites en el número de imagenes por página o el número de imágenes por grupo.

Como puedo crear un grupo de imagenes para mostrar el boton siguiente? de hecho el boton siguiente no se ve.

Pueden indicar si hay mas caracteristicas en caso de querer mostrar una lista de imagenes?

report abuse

vote down

vote up

Votes: +1

una respuesta
escrito por Sylve, abril 04, 2009

Debes poner un elemento en comun en todas las imagenes, al lado del lightbox (rel).

Así rel"lightbox[alguna cosa]"

Lo de alguna cosa lo pones igual en todas las imagenes que quieras que se junten.

report abuse

vote down

vote up

Votes: +1

ocualtar imagen #1
escrito por henrixivo, febrero 27, 2011

como puedo ocualtar "imagen # 1", para que no me aparezca, si no que pinche la foto y abra el lightbox sin mostrar "imagen # 1"

Gracias

report abuse

vote down

vote up

Votes: +0

Donde insertar el codigo para lightbox
escrito por Antonio, abril 25, 2011

Hola a todos.
Tengo este codigo en en formulario, alguien me podria decir donde colocar la llamada para que se me habra el lightbox y asi muestre la imagen

report abuse

vote down

vote up

Votes: +0

Mostrar/Ocultar formulario de comenario

Nombre

Email

Sitio Web

Título

Comentario

smaller | bigger

Subscribe via email (Registered users only)

Escribe los caracteres de la imagen

Nuevo Comentario