- es compatible con Firefox, IE6, IE7, Safari3, Opera + Netscape en Mac
- soporta multitud de formatos: imagenes (bmp, gif, jpg, png, tiff), video (avi, divx, mov, movie, mpeg, mpg, wmv, mid, midi), sonido (mp2, mp3, wav), Webs(asp, aspx, htm, html, php), txt, pdf, pps, swf, etc.
- se adapta automáticamente a la resolución de pantalla / tamaño del navegador
- diseño personalizable, lo que te permite darle un aspecto acorde con el de tu Web.
- detecta automáticamente el tipo de contenido a mostrar.
- la venta se muestra en forma modal, se centra en la página.permitiendo definir el tamaño y la posición de la misma.
- para cerrar la ventana basta con dar clic sobre la opción de cerrar o fuera de la ventana.
- se pueden usar galerÃas dentro de la ventana y navegar a través de ella.
En resumen, debes descargar los archivos de acá lightwindow.zip (v2.0) y subir a tu servidor, lightwindow.css, lightwindow.js, prototype.js, effects.js y scriptaculous.js, luego incluirlos entre etiquetas <head></head>.
<link rel="stylesheet" type="text/css" href="aqui_la_ruta/lightwindow.css" /> <script src='aqui_la_ruta/prototype.js' type='text/javascript'/> <script src='aqui_la_ruta/effects.js' type='text/javascript'/> <script src='aqui_la_ruta/lightwindow.js' type='text/javascript'/> <script src='aqui_la_ruta/scriptaculous.js' type='text/javascript'/>
Solo hay que cambiar la ruta y luego para asignar el efecto, usamos el selector class --> class="lightwindow":
<a class="lightwindow" href="http://www.youtube.com/v/asvKQOJZXcs" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false"> Star Wars: The Force Unleashed - Launch Trailer (HD)</a> <br/><a class="lightwindow" href="ruta/imagen.jpg" title="Quake III" author="John Carmack">Quake III</a>
Demostraciones de uso
Personalizando el LightWindow
Como disponemos de los archivos fuentes, podemos modificar el estilo jugando un poco con la apariencia de la ventana, incluso ponerla en otro idioma.
Nota:
Antes de hacer cualquier modificación es recomendable hacer un respaldo de los archivos a editar, en caso de no tenerlo.Si quieres que la ventana tenga un borde de cualquier tipo, incluso algo de efectos creados con CSS3, debes abrir el archivo lightwindow.css ubicado en la carpeta CSS. En este caso vamos a buscar la clase lightwindow_contents que es la encargada del estilo para el contenido.
#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background-color: #ffffff;
}
Le agregamos los efectos sin tocar lo demás y guardamos los cambios.
#lightwindow_contents {
overflow: hidden;
z-index: 0;
position: relative;
border: 10px solid #ffffff;
background-color: #ffffff;
-moz-box-shadow: 13px 16px 6px #000000; /* la sombra puede ser otro color */
-webkit-box-shadow: 13px 16px 6px #000000;
box-shadow: 13px 16px 6px #000000;
border:dashed 3px red; /* modificas red por tu color */
}
Para cambiar las palabras de la ventana a español (u otro idioma), debes modificar el archivo lightwindow.js ubicado en la carpeta javascript.
Busca dentro del archivo lo siguiente:
'by <span id="lightwindow_data_author"></span>'
y lo sustituyes por:
'Autor: <span id="lightwindow_data_author"></span>'
Busca:
'<img src="images/ajax-loading.gif" alt="loading" />'+ '<span>Loading or <a href="javascript: myLightWindow.deactivate();">Cancel</a></span>'+
y lo sustituyes por:
'<img src="images/ajax-loading.gif" alt="cargando .."/>'+ '<span>Cargando .. | <a href="javascript: myLightWindow.deactivate();">Cancelar</a> </span>'+
Ahora vamos a cambiar el enlace close de la ventana por una imagen, eso también lo hacemos en el archivo lightwindow.js.
Buscamos:
'<a id="lightwindow_title_bar_close_link" >close</a>'
y lo sustituimos por:
'<a id="lightwindow_title_bar_close_link" title="cerrar ventana"> <img src="./images/nombre_imagen" border="0" /></a>'
La imagen deberÃa estar en la carpeta images, donde dice nombre_imagen ponemos el nombre de la misma. También puedes colocar la URL de la imagen si la tienes alojada en otro sitio.
Recuerda que puedes jugar con el CSS hasta que quede como mejor te parece.
:) YEAH! esto esta bueno. A ver si lo pruebo.
ResponderEliminarexcelente ventana modal yo la utilizo para la difusión de videos y especialmente en los comentarios,aunque ahora Blogger ha cambiado códigos y he tenido que complementarla de otra manera saludos y excelente página
ResponderEliminar