BtnOpen

LightBox 2

Marzo 14th, 2008

LightBox 2 es un Script que se utiliza para mostrar imágenes ampliadas en una misma ventana. El script lo que hace es mostrar un div por encima de todo el contenido. El div se hace a medida de la foto y se atenua el resto. Luego con un click encima se cierra.

Hay una opción de ser de imágenes con el que luego con una foto bierta puedes ir pasando las siguientes.
Ejemplos de LightBox2

Lightbox 2

Descargar LightBox v2.04               Vía| Designios


8 Responses to “LightBox 2”

  1. Manuel Says:

    Hola, siento mucho interés por este visor de imágenes, pero desconozco la manera de incorporarlo a una pagina Web que tengo en construcción. Agradecería cualquier tipo de ayuda sobre los pasos que debo seguir para poder instalarlo y poder ver una serie de imágenes en dicha pagina.
    Adelanto que mis conocimientos son muy básicos, y agradecería que la ayuda fuera lo mas practica y clara posible. Un saludo, Manuel.

  2. acadio Says:

    Hola Manuel.
    La explicación que te detallo ahora, es la misma información que aparece en la página de Lightbox 2.
    Primero hay que vincular los archivos Javascript necesarios cambiando las rutas si se precisa:

    HTML:
    1. <script type="text/javascript" src="js/prototype.js"></script>
    2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    3. <script type="text/javascript" src="js/lightbox.js"></script>

    Luego hay que vincular también una hoja de estilos:

    HTML:
    1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    En esta hoja de estilos aparecen una serie de imágenes las cuales tendras que modificar la si las pones en un directorio diferente al del ejemplo: prev.gif y next.gif

    Por último para agregar imágenes solo tienes que ponerlas de esta manera:

    HTML:
    1. <a href="images/image-1.jpg" rel="lightbox" title="my caption" rel="nofollow">image #1</a>


    Donde pone my caption puedes poner una frase que aparecerá al pie de foto.

    Si prefieres hacer un set de imágenes el tipo de código para las imágenes será como este:

    HTML:
    1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]" rel="nofollow">image #1</a>
    2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]" rel="nofollow">image #2</a>
    3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]" rel="nofollow">image #3</a>

    Espero que te sea de ayuda, un saludo.

  3. Manuel Says:

    Agradezco mucho que me dediques este tiempo, intentare seguir los pasos que me indicas y espero poder conseguirlo. Un saludo, Manuel

  4. acadio Says:

    Hola de nuevo.
    Ciertamente te hubiera contestado antes, pero tube que instalar un plugin para el Wordpress para poder mostrar lineas de codigo.

    Los javascript y la hoja de CSS los pones dentro las etiquetas HTML
    y las imágenes dentro del

    un saludo.

  5. Dogguie Says:

    Yo lo tenía en mi blog, es muy bonito... pero lo desinstalé porque lo vi algo inutil. Bueno, quizás en el futuro me de ganas de ponerlo otra vez :D

  6. acadio Says:

    Yo tengo instalado el LightBox 1 en la zona de fotoblog, aunque sirve para todo el blog, así si en algún momento quiero ampliar una foto es muy rápido y sencillo.

  7. hola Says:

    como hago pa ponerlo en mi hi5.. me pueden dar los pasos xf gracias

  8. acadio Says:

    Hola, Hola....

    Verás yo uso Hi5, pero sinceramente no creo que se pueda acoplar Lightbox2 en esa comunidad. Se que te dejan cambiar algunas cosas de la interfaz mediante CSS, pero de ahi a incrustar lightbox...

    Bueno si algun usuario sabe como hacerlo, le invito a crear un post explicativo.

    Un saludo!

Deja un comentario


Add to Technorati Favorites BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog