Ver Mensaje Individual
  #9 (permalink)  
Antiguo 24/06/2010, 05:35
Anushka
 
Fecha de Ingreso: marzo-2004
Mensajes: 109
Antigüedad: 20 años, 8 meses
Puntos: 1
Respuesta: ¿Existe Lightbox para HTML?

Cita:
Iniciado por Banditolane Ver Mensaje
Anushka please. ......A ver si me puedes echar un cable y enseñarme a usarlo please!!
Lo que hice yo:
1) descargar archivo - http://dl.dropbox.com/u/647003/Ciuda.../Shadowbox.rar

2) descomprímelo y sube los archivos a un hosting o al servidor de prueba (p.ej. localhost)

3)Luego pega en cada página donde piensas utilizar efectos shadowbox - antes de </head> - lo siguiente:
Código:
<link rel="stylesheet" type="text/css" href="../shadowbox/shadowbox.css">
<script type="text/javascript" src="../shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
	language:   "es",
	modal: true,
	players:    ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
	});
</script>
¡OJO con las rutas marcadas en verde! Tienen que apuntar a los archivos de shadowbox....

4) ahora sólo hay que poner el atributo rel="shadowbox" dentro del código del elemento, por ejemplo:

Para imagen -
Código:
<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>
Galería de imagenes -
Código:
<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 1</a>
<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 2</a>
YouTube -
Código:
<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>
Video Google -
Código:
<a href="http://video.google.com/googleplayer.swf?docid=-1941725100819420671&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Video Google</a>
Archivo SWF -
Código:
<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>
Página WEB -
Código:
<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>
Mapa -
Código:
<a rel="shadowbox;width=425;height=350" title="Mapa" href="URL del mapa">Mapa Google</a>
__________________
Gracias