I. Introducción
Sencillamente se trata de una modificación de la librería LightBox pero donde el peso de las librerías en javascript es mucho menor. Su efecto es muy similar al que se ha visto con la librería imageBox y su implementación es bien sencilla.
En las referencias que os comento debajo, la descarga os implementa todo lo necesario para que lleveis a cabo lo que necesitais.
II. Uso de la librería
Como siempre, lo primero de todo, hacer referencias en la cabecera. En este caso constamos de tres ficheros en javascript:
<script type=»text/javascript» src=»js/prototype.lite.js» mce_src=»js/prototype.lite.js»></script>
<script type=»text/javascript» src=»js/moo.fx.js» mce_src=»js/moo.fx.js»></script>
<script type=»text/javascript» src=»js/litebox-1.0.js» mce_src=»js/litebox-1.0.js»></script>
Y el fichero que implementa la hoja de estilos:
<link rel=»stylesheet» href=»css/lightbox.css» mce_href=»css/lightbox.css» type=»text/css» media=»screen» />
También hay que añadir en la etiqueta body lo siguiente:
<body onload=»initLightbox()»>
Si ya teneis puesto algún onload, no os preocupeis, basta con que pongáis un «;» entre sentencias. Me explico:
<body onload=»LO_QUE_SEA; initLightbox()»>
Por último, la referencia con el enlace HTML:
<a href=»images/image-1.jpg» mce_href=»images/image-1.jpg» rel=»lightbox[example]» title=»…»>Lo que se quiera</a>
Como veis, muy sencillo y sin complicaciones. Sin necesidad de incluir código javascript dentro del HTML como ocurre con imageBox y de una forma limpia. Cosa que se agradece.
III. Referencias
– Volver –
Hola!!
A ver si eres tan amable de poder ayudarme. Quiero instalar LiteBox, y creo que lo hago todo bien, pero la imagen se me abre en una ventana nueva.
He leído en la página del autor que si eso pasa hay que añadir lo de initLightbox(), como tú también dices, pero es que no sé dónde he de poner eso, la verdad.
Supongo que será ese el problema de que no se me abra, porque también había leído que era por los [], que lo que tenía que hacer era ponerlo sin eso, sólo con un espacio.
Bueno, si pudieras ayudarme, te estaría muy agradecida, ya que he buscado por todas partes y no sé cómo hacerlo, porque todas las explicaciones dan por hecho que sé lo de la etiqueta body y no es así. Perdona mi ignorancia, jeje.
Por cierto, yo uso blogger. Muchas gracias!
Hola Elisabeth,
El «initLightbox()» debes introducirlo justamente en la etiqueta
<BODY>
. Me explico:Cuando generas un código HTML, la estructura básica sería de la siguiente forma:
<HTML>
<HEAD>
Cabecera de la página...
</HEAD>
<BODY>
Aqui tendrías tu página web entera...
</BODY>
</HTML>
Pues bien, justamente en la etiqueta
<BODY>
deberías colocar esa llamada a la función de la siguiente forma:<body onload="initLightbox()">
Debes buscar la etiqueta
<body>
dentro del documento donde quieras aplicar las ventanas emergentes y, en dicha etiqueta añadir justamente lo que te he comentado.Si no haces esa referencia, efectivamente, la imagen se abre en una nueva ventana.
Si sigues teniendo problemas no dudes en preguntar. Espero haberte ayudado.
Un saludo!
Hola de nuevo!!
Gracias por contestar tan rápido. Mira, te explico, porque eso que me comentas que haga, es lo que yo hice antes de escribirte el mensaje, pero como me daba error, pensé que estaba haciendo algo mal.
Yo en mi plantilla tengo esto:
skip to main |
skip to sidebar
Etc, etc, etc.
Entonces, yo lo que hago es ponerlo así:
skip to main |
skip to sidebar
Pero me da error, me dice:
The element type «body» must be terminated by the matching end-tag «».
Entonces, le quito las comillas, por si es eso y me vuelve a dar error:
Open quote is expected for attribute «{1}» associated with an element type «onload».
Y entonces, ya no sé qué hacer. Yo no entiendo nada de esto y me estoy volviendo loca porque he probado de todas formas posibles y claro, evidentemente, no sale, jeje.
Bueno, siento haberlo explicado así, pero es que era para hacerme entender bien. Muchas gracias por todo.
Bueno, lo repito porque no se ve como yo quería, ha puesto los enlaces.
Yo en mi plantilla lo tengo así:
skip to main |
skip to sidebar
Y yo lo pongo de esta manera:
skip to main |
skip to sidebar
Ay, perdona, pero me es imposible ponerte el código que tengo, aún separando con un espacio entre
En tu página hace enlace, pero bueno, supongo que me entenderás, yo pongo lo de initLightbox()… justo debajo de y me da esos errores.
Hola Elisabeth, agradecería, me enviaras el código y lo que me querías escribir por correo (jelomolopez@hotmail.com) para poder verlo adecuadamente e intentaré ayudarte porque así sin el código puesto la verdad, me hago un poco un lío.
Un saludo!
Hola de nuevo!!
Al final me he decidido por RoeBox, y con ese no he tenido ningún problema. Gracias igualmente por todo!
Hola, tengo un problemilla con el litebox, quiero que se muestre un flash en la cabecera de mi página y al pinchar sobre el thumb de la imagen y abrirse con el litebox se solapa por debajo del flash y no se ve al completo. ¿ Como puedo cambiar la posición en la que aparece la imagen para que no me ocurra esto?.He estado probando con el litebox.css , modificando algunas cosas pero no me sale.
Gracias
hola, he visyo yu tutorial y esta muy bien, me podrias decir si es posible modificar la posicion de la ventana en la q sale la foto con algun tipo de orden? gracias
hola,o es una birria,o lo explicas mal,o ambas
No es ninguna birria, lo explica muy bien y funciona a la perfección. Otra cosa es que no lo entiendas por falta de conocimientos. Sigue estudiando…
He implementado la litebox y el problema es que en fotos, las zonas negras u oscuras salen con puntos o manchas blancas ¿alguna idea de porqué ocurre esto?
Saludos
Hola he implementado el litebox en una aplicación aunque me gustaría poner el botón para cerrar el layer arriba… pensaba que sería facil pero mirando el código va a ser que no… alguna idea?