vicioalex
Efecto Lightwindow para tu pagina web o blog
Durante el desarrollo de mi pagina www.vicioalex.com he tenido la suerte de conocer un fantástico efecto. Se trata de un efecto Lightbox que permite mostrar en una ventana flotante sin necesidad de abandonar la página que estamos navegando con imágenes y galeria de imágenes, flash, videos youtube, pdf, iframes, etc. Tuve que hacerle algunas modificaciones y Espero que les sea de tanta utilidad como a mi. Haz clic aqui

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.
El efecto Lightbox, Amplia las imágenes de un modo animado, ya que el cuadro se redimensiona ampliándose o reduciéndose según las dimensiones de la imagen y con un modo de transición suave hace un efecto muy bonito.El efecto permite trabajar con imágenes de distintos tamaños sin tener que parametrizar para cada uno de ellos distinto código, ya que se adapta a cualquier tamaño.

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

  • Fuentes Externas: Es como una ventana emergente!
  • 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.

  • Iframe: Llame a un LightWindow desde un Iframe

    Imágenes: Individuales o conjuntos galería!
  • 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

  • Para formularios:
  • Formulario de ejemplo - formulario en un LightWindow!
  • Formulario con posición personalizada - formulario en un LightWindow!

  • Paginas: De ancho fijo y Fluidos.
  • 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: un pequeño contenido en la misma pagina.
  • Contenido en línea - El texto esta 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.

3.- Eso seria todo al final el codigo les tendria que quedar asi (Lo que esta de color rojo es un regalito para ustedes, no necesitaran instalar nada solo copienlo en su web) - (Y lo de azul es lo tendran que cambiarlo de acuerdo a lo que desean poner como por ejemplo galeria de imagenes, flash, videos youtube, etc.):
<!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

Siguiente
..
Anterior
..
Compatir esta publicacion:
VicioAlex Publicado por: Vicioalex C. | VicioAlex Categoria: , | El: 18 abril 2012 , A las: VicioAlex 6:04 p. m.
Comentarios por Facebook:
Comentanos tu opinion es muy importante, deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.
vicioalex A
Personas les gusta esto.
4 comentarios por Blogger:
vicioalex A 4 Personas les gusta esto.
Gracias por tu post,me ha sido de mucha utilidad,llevo tiempo detras de algo asi,gracias de nuevo
Hola, funciona con Internet Explorer?
Claro que si, funciona con todos los navegadores.
Muy buena info, una consulta, yo en la lightwindow abro otra pagina mia.. el problema que tengo es que luego no puedo cerrar la misma.. sabes como se puede hacer?
Saludos
vicioalex
Entradas Recientes