Como instaler lightbox en mi web

Antes que nada, dime para que lo quieres usar específicamente. Me refiero si es para una galería de fotos, videos, etc., y tratare de ayudarte!

Perdón por la tardanza. Es para una galería fotográfica.
Un saludo y feliz año

Felicidades para vos también!, y no hay problema por la demora, a ver si te puedo explicar simplemente.
Primero, antes de cerrar la etiqueta "head" de tu HTML tienes que poner este script:
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.mootools.min.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all">
<script type="text/javascript">
window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox({color:'black', dir: 'sexyimages'});
});
</script>
Luego tienes que poner en el mismo directorio donde esta tu página los archivos siguientes que te vienen con el LightBox
- Carpeta "sexyimages"
- Mootools-yui-compressed
- Sexylightbox
- Sexylightbox. V2.3.mootools.min
Con eso ya tienes todo listo para armar tu galería. Ahora viene el tema de armar la galería.
Primero pones las imágenes en una carpeta, junto con las miniaturas (podes poner tus imágenes en una carpeta llamada "images" y luego dentro de esta carpeta crear otra con el nombre "thums" para las miniaturas). Creas todas las images y miniaturas, y te vas al HTML. Una vez ahí elegís donde poner la galería, y pegas esta linea donde quieres que este la imagen:
<a href="assets/5.jpg" class="lightbox" rel="group1"><img src="assets/m5.jpg" alt=""></a>
Esto lo tienes que poner por CADA FOTO QUE QUIERAS CARGAR!, una linea por foto, y teniendo que configurar siguiendo estos parámetros:
Href= acá va el directorio de la imagen grande (ej: images/imagen1.jpg)
Rel= esto le dice al lightbox si puede mostrar otra imágenes de la misma carpeta o no. Por ejemplo, si vos armas una carpeta con varias imágenes y al abrir cualquiera de las miniaturas, el visitante pueda navegar por otras imágenes sin tener que cerrar el lightbox y abrir una por una. La idea acá es que si quieres que pase eso, poneles el mismo nombre de grupo en ese parámetro a todas las imágenes que quieras que pertenezcan a ese grupo, ¿me explico?. Si tienes 5 fotos y quieres que todas sean del mismo grupo, a todas acá le pones en rel="group1" y listo. Sino, a cada linea un group distinto y listo.
img src= aca pones el directorio de la imagen miniatura (ej: images/thum/mini_imagen1.jpg)
Y ya esta, debería andar todo bien si seguiste los pasos.
De todas maneras te dejo un link donde podes encontrar otros ejemplos más avanzados o diferentes aplicaciones!
Link de lightbox
Un abrazo grande y cualquier duda regresa!
Saludos!
Ernesto.
messiha.com.ar

Buenas tardes Ernesto.
El efecto lightbox en imágenes ya esta solucionado. Ahora tengo otro problema a ver si tu me puedes ayudar.
Quiero hacer el mismo efecto lightbox pero con videos. Es decir que salga el video en miniatura y cuando kaga clic se amplíe con el mismo efecto que las imágenes. He intentado hacerlo pero no sale del todo bien.
Espero tu respuesta.
Un saludo

Me alegro que te haya salido todo ok.
Respecto de los videos, la cosa tiene una pequeña vuelta más, pero es simple.
Te paso un ejemplo de un portal mio y te explico:
<div id="video" style="display: none;">
<object type="application/x-shockwave-flash" width="480" height="385" data="http://www.youtube.com/v/IUde3xra59E?fs=1&hl=es_ES">
<param name="movie" value="http://www.youtube.com/v/IUde3xra59E?fs=1&hl=es_ES">
<param name="wmode" value="transparent">
<param name="allowFullScreen" value="false">
</object>
</div>
<a href="#TB_inline?height=385&width=480&background=#000&inlineId=parte1" rel="sexylightbox"><img src="miniatura_video.png" title="" alt="Ver video" border="0"></a>
La cosa seria así:
El primer DIV es el que contiene el EMBED del video, como podrás ver. Es importante que definas el ID de ese DIV, ya veras porque.
Dentro de ese DIV, colocas el embed del video (recomiendo que por una cuestión de navegación y de no cargar tu servidor, subas los videos a YouTube y los llames desde allí). Fíjate que en este DIV tienes el STYLE con una propiedad "display:none". Eso es para que no muestre el DIV en pantalla, ya que vos quieres cargarlo en el LightBox.
Luego tienes el tag <a> donde definís que vas a abrir el video en el LightBox. Acá tienes que tener dos cosas en cuenta
1. El height y el width: en esa linea, veras esos dos valores, y veras que difieren un poco de las medidas reales del video. Eso es para que no te aparezcan barras de desplazamiento. Debes darle un valor superior al del video en algunos pixeles, e ir probando para que veas el video si esas barras.
2. inlineId=video: esto que es?, fácil. Luego de ese "igual" vos pones el mismo ID del div que carga el embed, en este caso se llama "video". De esa manera el LightBox sabe cual es el contenido que debe reproducir, y es por eso que el DIV en si, donde carga el EMBED, es oculto. De esta manera en la página no mostrás el video, PERO le decís dentro del <a> que lo abra con el lightbox.
3. img src="miniatura_video.png": esto es simplemente una miniatura del video, en la cual harás click y se te abrirá el video. Hasta donde se no podes poner el video en miniatura propiamente dicho, sino que haces una captura o bien pones un icono en el cual cliquean y abren el video en lightbox.
Estos dos TAGS deben ir contiguos, de esa manera sabrás que están relacionados entre ellos, o sea: el DIV carga el embed pero oculto, y el <a> le da la orden al lightbox de que abra ese contenido.
Creo que eso es todo.
Este ejemplo funciona para el lightbox más viejito. Ahora he bajado el nuevo pero aun no he investigado como funciona. Si te has bajado la version de lightbox donde tienes 3 carpetas (js, css e images) que contienen los Java, CSS y demás, avisame que te explico como se colocan en esta version, ya que CREO no funciona igual.
Un abrazo grande y avisame como anduviste!

Buenas tardes de nuevo y gracias por responder tan rapido.
La explicación a sido muy buena ademas de que yo no soy un experto en diseño y códigos web, así que muchas de las cosas me suenan a chino, jaja.
La version de lightbox que me descargue fue justamente esa que me comentas, la que tiene tres carpetas js, ccs e imágenes. Si puedes decirme por favor paso a paso como debo colocar lo que me has mandado te lo agradecería.
Yo suelo hacer las páginas con frontpage y aunque se que es muy básico, para las cosas que yo hago me va bastante bien. Los videos los voy a meter directamente desde youtube como me dijiste.
Gracias y un saludo

Bien, el tema es así. Esa version que bajaste creo se llama "jQuery Lightbox Evolution". Es una version paga, de la cual hay una pequeña version dando vueltas en internet que SOLO SIRVE para fotos, nada más. Si quieres todo completo, tienes que pagarlo.
Yo te voy a pasar un link donde bajas el lightbox gratis, completo, y te doy una página de ejemplos por las dudas.
Link para descargar el lightbox
LINK DE EJEMPLOS
http://www.coders.me/ejemplos/sexy-lightbox/
DIgamos, la explicacion mia es para esta version de LightBox que te paso ahora, que es la gratuita y completa, para fotos, videos, etc. ¿si?. O sea que si sigues mis pasos desde la primera explicacion, deberia andarte bien.
Un tip: bajate el DreamWeaver CS4, es bueno, simple, ayuda mucho y es un poco mas pro. AL menos investiga. El FrontPage ya fue. Es mas, el DreamWeaver tambien, pero ayuda mucho con la parte visual!
Asi que espero esta vez te ande todo bien, ya que mi primera pregunta deberia haber sido cual era la version que tenias! Jajajaj.
De todos modos, cualquier cosa volvé a preguntar!
Un abrazo!

Hola Ernesto.
El problema es que tengo la web con todos los códigos y links del otro lightbox. ¿Tengo qué cambiar todo por este que me mandas o solo con cambiar los enlaces de las imágenes me valdría?
¿Me refiero lo que va dentro de head y todo eso?
Gracias y un saludo

Nonono, mira. Lo que yo te explique desde un comienzo acá en TodoExpertos estaba explicado para el lightbox que te envíe ahora para que bajes, no para el nuevo, ¿me explico?. Digamos, la explicación mía no tiene que andar con el lightbox nuevo, porque lo use hace poco y la configuración es distinta.
Por eso te digo que debería andar normal.
De todos modos, pensá esto. El lightbox que tienes ahora (no el que te pase) no reproduce videos, salvo que hayas comprado la version completa.
Por ende, es mejor este que te envíe ahora, ya que sirve para todo, y muy importante, es GRATIS!.
Saludos y no cualquier cosa pregunta de nuevo ;)
Ernesto

Ok Ernesto. Pero el que yo tengo en mi web es el de las 3 carpetas js, ccs e imágenes, porque ya lo tenia puesto antes de contestarme tu la primera vez.
¿Entonces qué debo hacer?
¿Cambiar las lineas del head por estas que tu me has puesto aquí?
¿Ademas tendría que eliminar esas tres carpetas y poner la de sexylightbox y los otros 3 archivos que están con la carpeta no?
Gracias y perdón por ser tan pesado

Claro... digamos, tienes que deshacer todo lo que hayas hecho vos antes de consultarme, y luego seguir mis pasos explicados acá en este posteo.
Denberia andar todo bien ya que te los pase de una aplicación mía directamente.
Borra esas carpetas que tenias, borra el
<script> y demas que hayas agregado, y luego hace los pasos que te di que tendria q estar todo mas que bien!
Un saludo y no es molestia para nada hermano!
Ernesto.

Buenas tardes Ernesto.
He eliminado el otro lightbox de mi web y he incluido el que tu me has mandado, pero no me funciona. Te explico como lo he hecho por si esta mal.
Primero he incluido estos archivos en la carpeta donde esta mi web.
- Carpeta "sexyimages"
- mootools-yui-compressed
- sexylightbox
- sexylightbox.v2.3.mootools.min
Despues he incluido esto dentro de las etiquetas head.
<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.mootools.min.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all">
<script type="text/javascript">
window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox({color:'black', dir: 'sexyimages'});
});
</script>
Por ultimo he puesto esto donde va la imagen que quiero abrir con lightbox, con la dirección donde están las imágenes.
<a href="images/aviario/variedad-cria/canarios/1 ATRM 4.jpg" class="lightbox" rel="group1"><img src="images/aviario/variedad-cria/canarios/1 ATRM 4.jpg" alt="" width="120" height="80"></a>
La imagen no abre con efecto lightbox sino como un hipervínculo simple.
Espero tu contestación para seguir. Un saludo

Hola de nuevo Ernesto.
Investigando un poco he conseguido hacerlo funcionar. En vez de poner en el rel="group1" he puesto rel="sexylight" y para hacer grupos de imagenes rel="sexylight[nombredelgrupo].
Ahora quería saber donde puedo cambiar la opacidad o transparencia del fondo cuando se amplia la imagen, porque querría oscurecerlo un poco más.
Voy a probar un video y te cuento.
Gracias y un saludo

Nada Ernesto que no soy capaz de hacerlo funcionar en videos. Creo que algo algo mal porque no entiendo bien del todo lo que me explicaste de los videos. ¿Por favor puedes ponérmelo paso por paso lo de los videos?
No entiendo bien lo de definir ID y inlineId=video. ¿Qué debo poner en los dos casos?
Gracias y un saludo

MmMMm...
Vamos por partes. De tu primer posteo, el de las imágenes, veo esto:
Fíjate de probar con esta linea donde cargas las imágenes en lugar de la que ya te di:
<a href="images/aviario/variedad-cria/canarios/1 ATRM 4.jpg" rel="sexylightbox[group1]" title="Titulo de la foto"><img src="images/aviario/variedad-cria/canarios/1 ATRM 4.jpg" alt="Titulo de la foto" border="0" width="120" height="80"></a>
Revisa que las rutas para las img estén bien porque las copie de tu modelo y me dices que paso. Otra cosa, evita poner espacios en los nombres de las imágenes, videos y todo lo que cargues en internet. Colocalo con guiones (ejemplo: tu_foto o tu-foto)
---o---
Para el video... los pasos previos (archivos, lineas del head, etc) son siempre los mismos, ahora te voy a decir paso a paso como hacer para videos en lugar de imágenes
<div id="video" style="display: none;">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/3PaXpcmiIr8" frameborder="0" allowFullScreen></iframe>
</div>
<a href="#TB_inline?height=405&width=655&background=#000&inlineId=video" rel="sexylightbox"><img src="miniatura_video.png" title="" alt="Ver video" border="0"></a>
Debes colocar eso que pegue por cada video que quieras cargar, el DIV y el <A>, donde quieras que este (veras un cambio en relación al primer ejemplo, pero es que youtube cambio de modo de insertar videos :S)
En el DIV, si te fijas, hay un 'style="display:none;" '. Eso oculta ese DIV, ya que tu no quieres mostrarlo en pantalla directamente sino en el Lightbox. Dejalo así.
Luego, dentro del DIV coloco el EMBED de YouTube (lightbox funciona solo con embed para videos), por ende deberás subir el video a YouTube, y cuando vas a reproducirlo una vez subido, fíjate debajo del video que aparece un botón de "Insertar", copia ese código tal cual te lo da YouTube y lo pegas dentro del DIV (fíjate que yo puse el ejemplo con uno ya insertado, por ende reemplázalo... comienza con <iframe> y termina con </iframe>)
Luego vas a la siguiente etiqueta, el <A>. Aquí debes cambiar al menos 4 parámetros
height: si te fijas en el código que pegaste en el DIV que te dio YouTube, el video tiene medidas. Chequea el HEIGHT (390, por ejemplo), y en este <A> colócale aproximadamente 15 más, por ende 405, siguiendo el ejemplo. Eso es para que no te aparezcan las barras de desplzamiento dentro del lightbox
width: lo mismo que arriba pero con el Widht.
InlineId: acá debes chequear que diga LO MISMO que en el ID del DIV donde insertaste el video. Por ejemplo, y siguiendo el ejemplo que colocamos acá,
<div id="video" style="display: none;">
Esto que pegue es el DIV donde insertaste el video. Fíjate que el ID es "video".
Siguiendo, en el <A> deberías poner, en este parámetro el mismo nombre de ID, a saber seria inlineId=video
Si vas a poner más videos en la página a parte de este, ten en cuenta de colocar un nombre distintivo. Para este ejemplo lo dejaremos así, pero si son varios, cada video que colocas debe tener el ID único para cada uno, por ejemplo si pones dos videos, uno de pájaros y uno de perros, llamalos video_perros y video_pajaros, ya que no puedes usar un mismo id para dos objetos ademas de que entraras en conflictos con el lightbox.
Src: por ultimo, acá va la miniatura o imagen sobre la cual clicas y ves el video.
Espero haberte ayudado, y ojala puedas marcharlo esta vez.
La primera vez si no lo entiendes es frustrante, pero luego que lo entiendes, es una real tontera usarlo!, ademas tiene muchos otros usos que puedes ver en la página de ejemplos que te pase.
Un abrazo y no dudes en regresar por cualquier cosa.
Ernesto.

¿Pudiste al final?
Abrazo.

Buenos días Ernesto.
Perdona que haya tardado en contestar pero he estado un poco liado esta semana.
En realidad he conseguido hacer funcionar los videos tanto con lightbox como con sexylightbox y creo que me gusta más con lightbox, aunque hay un problemilla. Me gustaría que me dieses tu dirección de correo para poder enviarte unas fotos y puedas ver lo que me pasa, a ver si tu sabes porque pasa y como se puede arreglar, tanto con lightbox como con sexylightbox.
Gracias y un saludo

Dale. Manda un mail a messiha.bureau.creativo&@&hotmail.com (quita los "&" antes de enviarlo, pues los coloco para que los robots no levanten mi dirección ;) )

Ya te lo he enviado. A ver que te parece.
Gracias