Lightbox, imágenes emergentes que permite mostrar gráficoss y contenido en ventanas que se superponen sobre todo el web con un elegante efecto, desarrollado por Lokesh Dhakar y dejando atrás las incomodas ventanas popups pues el efecto es mucho más llamativo debido a la forma que se presenta la imagen..
Ver demo funcionando con todos los elemplos
Con este sencillo tutorial lo vamos aplicar a Blogger:
El zip comtiene:
Archivo js, css, gráficos y todos los códigos (incluidos los que estan alojados en mi servidor)
TUTORIAL
1.- Lo primero vamos a pegar el código siguiente a continuación de <head>
<script type=”text/javascript” language=”javascript” src=”URL archivo.js“></script><link rel=”stylesheet” href=”URL archivo.css” type=”text/css” media=”screen” />
<a href=”URL de la imagen” rel=”lytebox” title=”Descripcion de la imagen”>Image 1</a>
<a href=”URL de la imagen” rel=”lytebox” title=”Descripcion de la imagen”><img src=”URL de la imagen”></a>
<a href=”URL de la imagen” rel=”lyteshow[vacation]” title=”Titulo”>Descripcion de la imagen</a><a href=”URL de la imagen” rel=”lyteshow[vacation]” title=”Titulo”>Descripcion de la imagen</a>
5.- Contenido HTLM
<a href=”http://www.google.com” rel=”lyteframe” title=”Buscar en Google”
rev=”width: 400px; height: 300px; scrolling: no;”>Buscar en Google</a>
Cuando se utiliza el “Lyteframe” característica, el atributo REV se utiliza para controlar la anchura, altura y desplazamiento de la ventana. Si el atributo REV se omite, entonces la anchura por defecto y la altura se establece en 400 píxeles y el desplazamiento se establece en automático.
OTRA FORMA DE INSERTAR LOS GRAFICOS
Subimos el gráfico de la forma habitual, alineando y con el tamaño de la miniatura que deseemos:
Una vez subido nos pasamos a edición HTML y donde indica la captura pegamos: rel=”lytebox” y en caso de grupo de imágenes: rel=”lyteshow[vacation]” en cada una de las imágenes del grupo.
FUNCIONA EN:
IE 5.01 SP2 – El efecto de fundido no funciona, el fondo es oscuro (completamente).
IE 5.5 SP2 – No hay problemas conocidos.
IE 7.0 – No hay problemas conocidos.
IE 8.0 – No hay problemas conocidos.
Opera - No hay problemas conocidos.
Firefox 1.5 + – No hay problemas conocidos.
Crome - No hay problemas conocidos.
------------------------------------------
Post relacionados:
Red Blogs
Quiero saber si me puedes ayudar, instale el lightbox en mi blog, pero queria saber que codigo debo usar para tener un grupo de imagenes, pero con un grafico miniatura ya que no incluiste ese codigo en tu tutorial de lightbox, ya intente modificar los codigos pero no lo logro. En si quiero que a mi galeria de imagenes se le vea el boton de “Next” y “Prev” para pasar entre las fotos, pero yo uso una foto grande y una otra en miniatura. Espero me haya explicado bien.
Agradeceria mucho que me ayudaras.
Saludos
Como instalar lightbox en Blogger – http://redblogs.org/como-instalar-lightb…
Hola, tengo un problema, sube los archivos y me aparece bien, funciona correctamente, lo malo, es que no me aparecen las imagenes que dicen “Next” “Closer”, etc. porq pasa esto? que debo hacer, no se como se suben las imagenes para conectarlas! expliquen eso porfa!
De verdad he estado realizando pruebas y quedo super cool, que lo voy a estar aplicando en mis otros blog, pero la pregunta es que no me salen las etiquetas de anterior, next y cerrar me gustaria que solo me respondieras eso lo demas gran aporte mi hermano.
Carlos, me alegra que el tutorial te sea útil…
Déjame el link de tu sitio, no deberias tener problema para para que te salga el prev y nex al pasar el ratón por encima del gráfico.
Ya me dirás…
Saludos
Pilar
Gracias, bueno exactamente es en esta entrada! http://traviesoscrewpty.blogspot.com/2011/04/fotos-traviesos-crew.html No lo he puesto en mi sitio personal ya que quiero que quede chevere como el de usted.
Una vez mas gracias Pilar.
Ya solucione, gracias!
Muy bueno el tutorial ! Pero tengo una pregunta…
Cómo se puede hacer para que el lightbox se abra automáticamente al entrar en la pag de inicio?, osea como la publicidad que hay en algunas páginas.
Gracias.
no se si a alguien le habrá pasado pero a mi me da error al poner el primer código html después del
ya he conseguido hacerlo, lo unico que el codigo lo he puesto despues del /head. Otras duda que tengo es como puedo configurarlo para que despues de la ultima imagen, salte directamente a la primera y tambien quiero poder cambiar la imagen haciendo click en lugar de pasarlas con las flechas.
Gracias
Hola! Muchas gracias por el tutorial, me ha ido de perlas. Pero tengo el mismo problema de Carlos, no me aparecen los botones de Close ni los de Next y Prev. He alojado todos los archivos en mi propio servidor. He leido por otros sitios que se trataría de modificar los links del archivo java, pero no encuentro las mismas lineas de codigo. Supongo que al ser distintas versiones… Me sería de mucha ayuda algun consejo con el cual arreglar el error.
La web: <a href="http://www.thepinkelephants.es" en la sección de Photos.
Gracias!
Hola, Muchísimas gracias por el tutorial, lo he instalado correctamente y en las imágenes que lo he implementado queda genial. Aun con eso tengo una pregunta, he visto que en la carpeta images existen distintos colores de márgenes, textos, etc y en cambio siempre me salen en gris, ¿es posible elegir el color? ¿como?. Gracias por todo.