Este bonito efecto emergente que, sin salir de la página, te oscurece el fondo y te muestra la imagen a tamaño completo y en todo su explendor. Además, si queremos crear grupos, aparecen al pasar el ratón por determinadas zonas de la imagen, unos botones de “Anterior” y “Siguiente” que nos permite movernos por todo el grupo. Y por supuesto, el botón de cerrar, para volver a la página con las miniaturas. Este fantastico efecto es posible que hayáis visto en alguna web, y que podemos añadir a nuestras páginas de un modo muy sencillo, con resultados bastante aparentes.
Instalacion:
1.- Coloca el siguiente codigo antes del </head> dentro de tu pagina web, cambia lo que esta de color rojo por la direccion de tu pagina web:
<script src="URL_DE_/javascript/prototype.js" type="text/javascript">
</script>
<script src="URL_DE_/javascript/effects.js" type="text/javascript">
</script>
<script src="URL_DE_/lightwindow/javascript/lightwindow.js" type="text/javascript">
</script>
<link href="URL_DE_/css/lightwindow.css" rel="stylesheet" type="text/css"></link>
<style>p {margin: 0 0 20px 0;color: #cccccc;line-height: 140%;}
</style>
2.- Copia cualquiera de estos codigos despues del <body> de tu pagina web (Haz clic en cualquiera de los enlases para ver como quedara en tu web):
-
Media: Movies, Flash, PDF, videos de youtube.
- Ejemplo de SWF
-
SWF Galería - varios swf
- SWF desde una url externa
-
Abrir archivos PDF!
-
YouTube: Abrir videos con solo la URL
- Ejemplo web - Vista previa de cualquier sitio web desde la tuya!
-
Esta página es local a tu dominio, pero se coloca en un iframe.
- Imagen - Sólo una imagen
-
Imagen externa - Una Imagen desde una url externa.
-
Galería de Imágenes - Muestra varias imagenes.
- Galería de imágenes / Múltiples imágenes
- Formulario de ejemplo - formulario en un LightWindow!
-
Formulario con posición personalizada - formulario en un LightWindow!
- Esta página no tiene un ancho, el contenido es flexible.
-
Esta página tiene una cantidad definida de espacio que necesita
-
Esta página es simplemente demasiado grande para la ventana del navegador.
-
Dimensiones del equipo - Establecer las dimensiones de la ventana.
- Contenido en línea - El texto esta en la misma pagina.
Fuentes Externas: Es como una ventana emergente!
Imágenes: Individuales o conjuntos galería!
Para formularios:
Paginas: De ancho fijo y Fluidos.
Contenido en línea: un pequeño contenido en la misma pagina.
Oh yeah, this content was pulled from within the page!
In order to get the LightWindow to fit the content, you have to define the height and width of a div in the inline div or send values for lightwindow_width and lightwindow_height in the url string. Personally I prefer the inner div method, this way you can gracefully degrade the link as I did into an anchor if javascript isn't available.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nombre de tu pagina </title>
<script src="http://vicioalex.99h.com.ar/ejemplos/lightwindow/javascript/prototype.js" type="text/javascript">
</script>
<script src="http://vicioalex.99h.com.ar/ejemplos/lightwindow/javascript/effects.js" type="text/javascript">
</script>
<script src="http://vicioalex.99h.com.ar/ejemplos/lightwindow/javascript/lightwindow.js" type="text/javascript">
</script>
<link href="http://vicioalex.99h.com.ar/ejemplos/lightwindow/css/lightwindow.css" rel="stylesheet" type="text/css"></link>
<style>
p {margin: 0 0 20px 0;color: #cccccc;line-height: 140%;}
</style>
</head>
<body>
<a author="Aqui tu Nombre" caption="Escribe tu titulo deseado" class="lightwindow page-options" href="http://farm1.static.flickr.com/180/439443686_bc797081ea.jpg" title="Aqui un titulo para google">Imagen externa - Una Imagen desde una url externa.</a>
</body>
</html>
Descargas
http://www.box.com/s/813cb5cd2e367719a98b (Lightwindow Modificado)
http://www.p51labs.com/lightwindow/lightwindow.zip (Lightwindow Original)
Entradas Relacionadas
Saludos
Publicar un comentario