Mantenimiento mensual posicionamiento
Mantenimiento mensual posicionamiento
€120.00
Consultoria Desarrollo Online MENSUAL
Consultoria Desarrollo Online MENSUAL
€55.00
Analisis estado y desarrollo estrategia
Analisis estado y desarrollo estrategia
€250.00
Posicionamiento Web Básico
Posicionamiento Web Básico
€300.00
Informe Web Completo
Informe Web Completo
€45.00
Lightbox 2 Imprimir E-mail
sábado, 23 de febrero de 2008

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>

2. Incluir el archivo Lightbox CSS (o anexar su hoja de estilo activo con los estilos de Lightbox ).

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


3. Compruebe el CSS y asegúrese de que la referencia prev.gif y next.gif archivos están en el lugar correcto. También, asegúrese de que el loading.gif y close.gif archivos como referencia cerca de la parte superior de la lightbox.js archivo están en el lugar correcto.

Parte 2 - Activar


1. Añadir un rel="lightbox" atribuir a cualquier enlace para activar la etiqueta de la caja luminosa. Por ejemplo:

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


Opcional: Utilice el atributo de título si quieres mostrar un pie de foto.

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.

Lightbox-2

 

Necesario: -
Descarga: http://www.huddletogether.com/projects/lightbox2/#download
Licencia: Creative Commons Attribution 2.5 License



Añade este artículo a tu marcador social favorito
Del.icio.us! Mister-Wong! Google! Yahoo! Live! Meneame Webeame Fresqui Facebook! Slashdot! Technorati! StumbleUpon! Spurl! Furl! Digg! Reddit! Free social bookmarking plugins and extensions for Joomla! websites!
Trackback(0)
Comentarios (2)Add Comment
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

Escribir comentario
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger

security code
Escribe los caracteres de la imagen


busy
Modificado el ( sábado, 23 de febrero de 2008 )
 
< Anterior   Siguiente >
Página HTML sencilla
Página HTML sencilla
€150.00
Informe competencia Online
Informe competencia Online
€200.00
Analisis estado y desarrollo estrategia
Analisis estado y desarrollo estrategia
€250.00
1Mb Hospedaje Autónomo ANUAL
1Mb Hospedaje Autónomo ANUAL
€0.50
Registrate!
XHTML Validation
CSS Validation
Powerd by YOOtheme
Creative Commons License
Esta obra está bajo una licencia de Creative Commons.