Integrar Lightbox JS v2.0 en Blogger
He estado buscando información de como integrar Lightbox en blogger y después de unas pruebas ya lo tengo en marcha. Aprovechando la experiencia os pongo los pasos a seguir para la gente que tiene su blog en blogger:
- Descargar Lightbox de su página web oficial.
- Descomprimir el archivo descargado y subirlos a vuestro servidor web. Si el blog lo tenéis en blogspot lo que podéis hacer es crearos una cuenta en google pages y subir ahí todos los archivos (es el método que he usado yo).
- Logeate en blogger y ve a la sección Plantilla -> Edición de HTML
- Añadir la siguiente linea en la sección <head> (donde están los <meta>):
<link href='http://tuusuario.googlepages.com/lightbox.css' media='screen' rel='stylesheet' type='text/css'/> - Añadir estas lineas justo antes del </head>:
<script src='http://tuusuario.googlepages.com/prototype.js' type='text/javascript'/>
<script src='http://tuusuario.googlepages.com/scriptaculous.js?load=effects' type='text/javascript'/>
<script src='http://tuusuario.googlepages.com/lightbox.js' type='text/javascript'/> - Comprueba que en el archivo lightbox.css que has subido al servidor estén las referencias a los archivos prev.gif y next.gif correctamente. Si los has subido a google pages la dirección de los archivos tendrá que ser algo como esto: "http://tuusuario.googlepages.com/prev.gif"
- Comprueba también las referencias a los archivos loading.gif y close.gif que hay en el archivo lightbox.js
- Cuando esté todo listo guarda los cambios de la plantilla.
- No hay forma de activar Lightbox automáticamente para que cuando crees una nueva entrada en el blog, las imágenes que subas lo utilicen. Por lo que hay que hacerlo manualmente cuando crees las nuevas entradas.
- Cuando crees una nueva entrada, antes de publicarla, haz lo siguiente:
- Ve al modo "Edición de HTML".
- Si has subido alguna imagen a la nueva entrada te aparecerá algo como esto:
- Cambia el código seleccionado en la imagen por rel="lightbox"
- Si le pones un atributo title aparecerá como el caption de la imagen.
- Para tener una especie de álbum compuesto por más de una imagen y poder ir avanzando en ellas mediante dos botones que aparecen en las esquinas superiores tendrás que poner lo siguiente en las imágenes que quieras que completen el álbum: rel="lightbox[nombreAlbum]
- Con esto tendría que ser suficiente, recuerda cambiar las referencias de los dos archivos mencionados anteriormente y de las lineas de código que hay que insertar en la plantilla de tu blog. En la entrada anterior vereis un ejemplo de album al hacer click sobre las imagenes.
19 comentarios:
Que tal mi estimado.. Yo tambien implemente el LigthBox en mi blog. Y al menos yo me tope con algunos problemas.. te comento algunos:
1.- La pantalla de fondo oscura no cubria completamente la pantalla.
2.- Las urls de las paginas a abrir no las abria no se porque razon.
Soluciones:
1.- Modifique el css que viene en del LightBox para que tuviera un ancho de mas del 100% esto ocasionaba que hubiera scroll horizontal pero le meti por medio de hoja de estilo que no apareciera el scroll horizontal y asi funciono. (Esta solucion podria no aplicar para todos los blogs.)
2.- Estoy usando la 2da. version de blogger y al parecer las urls no me jalaban con el LightBox, escarbandole (y bastante) encontre que funciona quitandole solo el nombre del archivo, dejando la extension .jpg (o del archivo destino), quitando la diagonal inversa de la carpeta y uniendo el nombre de la carpeta con la extension del archivo.. quedaria algo asi:
(Original)
http://bp3.blogger.com/_WZ4WVokw63c/RgqIXu31KfI/AAAAAAAAADI/y8lVtpoOhy8/s1600-h/Cartoon.jpg
(Para LightBox)
http://bp3.blogger.com/_WZ4WVokw63c/RgqIXu31KfI/AAAAAAAAADI/y8lVtpoOhy8/s1600-h.jpg
No se si eso suceda siempre o quizas fue mi version de Lightbox (cosa que dudo) el caso que despues de liarme tanto lo pude echar andar, creo que tu no tuviste problema pero escribo estos detalles porque quizas a alguien le pueden servir mas adelante.. suerte y felicidades por el post..
Gracias Darky.
Yo no he tenido esos problemas pero siempre viene bien por si a alguno le pasa ;)
Hola, comento mi problema:
Instalo (con los mismos problemas que Darky) todo y va fantástico en Firefox, pero en MS Internet Explorer no se ve NADA de la página. Nada de nada. ¿Cúal es el problema?
Hola estimado, la verdad que seguí paso a paso tu guía, pero el resultado final es solo una imagen en blanco, o sea no carga la imagen. Pienso el problema puede ser que el primer código lo puse debajo de "head" ya que nunca encontré el famoso "meta". Igual no entendí bien eso de "las referencias a los archivos prev.gif y next.gif".
En fin seguiré intentando, saludos.
hola blogger! ya te agregué a mis links pork tu blog me resulto muy util y lo necesitare en mas de una ocasion :) el unico problema que tengo es que no me aparece el boton "close" y supongo que tampoco "next" ni "prev". pienso que tengo que editar la css pero no se como. si me pudieras echar una mano te lo agradeceria.
Salu2
Hola Xkalibur, gracias por tus comentarios.
Lo de las imagenes será cosa del css sí. Editalo con cualquier editor de texto (bloc de notas mismo) y busca donde estan las referencias a las imagenes (los .gif).
Tendrás que reemplazar las rutas que tengas por defecto por la ruta completa de donde las has subido en tu web.
En mi css por ejemplo la ruta del "prev" la tengo asi: #prevLink:visited:hover { background: url(http://ozius.nsk.googlepages.com/prevlabel.gif)
Cuando acabes de editarlo vuelves a subir el archivo css y listo. Espero que puedas arreglarlo.
un saludo
echando un vistazo a tu blog veo que no tienes subido el archivo close.gif en tu googlepages, por eso no te aparecerá.
Gracias.
Hola Ozius, soy un lector de tu Blog el cual considero buenisimo.
Al grano, resulta que instale Lightbox 2 y me funciona bien (con gran esfuerzo lo logre)pero el unico inconveniente es que tengo menus interactivosSsector izquierdo) que al ejecutarlos Lightbox me los intenta abrir al igual que las imagenes en las entradas desordenando todo mi template. Con mis pocos conocimientos en el tema no eh logrado saber ni encontrar la solucion en la red.
Desde ya gracias.
Seguro que es problema de lightbox? he estado mirando un poco el codigo fuente de tu blog y creo que no debería ser cosa de lightbox.
para que se lance lightbox en el enlace a href=""... debes tener puesto rel="lightbox" y no hay nada de eso. por eso me extraña que sea cosa de lightbox.
osea, en la ultima entrada subida lightbox me funciona y bien de hecho lo tengo como tu dices, como corresponde, el problema es que tambien se ejecuta en el menu y no deberia ejecutarse ahi porque no lo tengo relacionado. No entiendo porque al ejecutar mi menu, Lightbox tambien intenta abrirlo...
De hecho al eliminar el Lightbox de mi plantilla, el menu de la izquierda vuelve a la normalidad.
Adoro el efecto de Lightbox y no me gustaria perderlo...
Me funciona bien pero la imagen no se ve
La verdad que esta entrada tiene bastante tiempo, espero que alguien lo lea. He hecho todos los pasos que comentais, modifique el .css y .js y todo tal cual. Entonces ahora pincho sobre la foto y no pasa nada. Ni se abre en una pagina aparte la foto ni nada... alguien que entienda podria mirarme si hago algo mal?? lo podeis mirar en el codigo fuente de mi blog: http://macro-natura.blogspot.com
Gracias!
A mí me pasa lo mismo que al compañero "anónimo", que al hacer clic en la imagen no hace nada, ni se inmuta jeje. He estado mirando si al copiar los enlances me he comido alguna letra o algo pero no encuentro el error. Si me pudieran ayudar se los agradecería.
Un saludo!
Buenas y perdón por el atraco...
Estoy intentando implementar este lightbox en mi blog pero me resulta imposible, por más manuales e instrucciones que he seguido...
Los pasos que he seguido han sido los siguientes:
1. me registré en lycos para obtener un servidor web, donde alojé la carpeta descomprimida de lightbox en su ftp
2. añadí los scripts en mi platilla, enlazando las ubicaciones de los js, css y los gif en la ftp (ftp://ftp. etc)
Pero no tengo manera, la visualización lightbox no funciona (y he incluido la llamada rel="lightbox" en la imagen).
Qué podría estar haciendo mal? Os agradecería enormemente vuestra ayuda.
Hola, mira no se mucho de informatica asi que me disculpo de cualquier burrada que pueda preguntar: Te explico, yo uso blogger para mostrar mi tira comica (webcomic) y me gustaria usar lightbox o litebox para que sea mas sencillo de leer y menos tedioso pero mi problema es el segundo paso (me complique muy pronto) es que no entiendo muy bien como pasar el documento CSS de lightbox al blog, ¿tengo que crear un sitio nuevo a google sites?, es que no tengo muy claro que relacion tiene esto con el blogger...¿sera que puedes aclararmelo si no es mucha molestia?, lo demas lo entiendo perfectamente, de hecho estoy aprendiendo un poco mas de html y eso que mis conocimientos en informatica son muy limitados (al menos todavia puedo aprender).
HOLA MUY BUEN POST PERO CUANDO HAGO TODO Y PONGO LOS CODIGO EN EL BLOG LA IMAGEN CLOSE NO ME APARECE PERO SI LAS DEMAS (NEXT - PREV) CUAL ES EL PROBLEMA??? AYUDA PORFAVOR
Publicar un comentario en la entrada