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


10 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!

  9. Florencio Says:

    estoy tratando de utilizar LightBox pero cuando lo subo a mi servidor no funciona no se a que se deba esto, ya que cuando doy clic sobre la imagen me abre una pagina nueva del internet explorer,sigo los pasos como se muestran en todas las paginas, pero siempre llego a la misma conclusion de que no me funciona cualquiera ayuda estare totalmente agradecido

  10. acadio Says:

    Hola Florencio.
    Cuando pasa eso, normalmente es porque no te carga bien alguna de las librerias o porque no has puesto el rel="lightbox" en la imágen.

    Fíjate bien en las rutas de las librerias de javascript y que tengas el rel="lightbox" en cada foto.

    Un saludo

Deja un comentario


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