Me ha gustado mucho la entrada de Luis Barriocanal sobre el Encuentro de Edublogs de Ayerbe. El contenido, sobre todo... pero también la forma. A partir de un texto, se vinculan imágenes que se cargan en una ventana emergente que se adaptan al tamaño de cada una de las imágenes. Preguntado que qué había utilizado para hacer esto, me dice que es un plugin para WordPress.
Así, buscando algo parecido para webs en general, y ver si también funcionaba en Blogger, he llegado al Lightbox.
He tenido cierta dificultad para su instalación y funcionamiento. En una web en la que todo se puede subir por ftp y las carpetas están próximas, no ha habido ningún problema.
Para empezar, hay que descargar el Ligntbox v2.03.3
Se descarga un archivo comprimido que, al descomprimirlo, da como resultado un index.html y tres carpetas: css, images y js
Estas tres carpetas, las he metido dentro de otra y lo he mandado a un servidor que permita el ftp normal.
Una vez hecho esto, he comprobado que si hacía la actividad en esa web, las cosas funcionaban correctamente sin hacer nada más que seguir las instrucciones indicadas en la web y en el index.html descargado. En este blog, ha habido que hacer algo más.
1.- El código javascript en la cabecera de la plantilla del blog. Entre <head> y </head> Sustituyendo las llamadas a los 3 archivos .js y a la hoja de estilos .css por sus rutas absolutas.
3.- Una vez hecho esto, he pegado, en esta entrada, el código que se comenta en la página oficial, sustituyendo el rel="lightbox" por rel="http://rutadelacarpeta/lightbox", es decir, haciendo una relación empleando una ruta absoluta pues los archivos y esta entrada se encuentran en servidores diferentes.
Ejemplo de un vínculo:<a href="http://www.rutadelaimagen.jpg" rel="http://rutadellightbox/lightbox" title="Texto del título de la imagen">Título de la imagen</a>
Para finalizar, he tenido problemas con el gif animado que gira mientras se carga la imagen y con la cruz para cerrar la ventana emergente.
Esto se ha arreglado, cambiando, en el archivo lightbox.js dentro de la carpeta js las siguientes líneas:var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
Por la ruta absoluta de ambos gifs:
var fileLoadingImage = "http://rutadelacarpeta/images/loading.gif";
var fileBottomNavCloseImage = "http://rutadelacarpeta/images/closelabel.gif";
En fin, un poco complicado pero creo que merece la pena.
Pongo un ejemplo:
Picasso: cinco obras de sus primeros tiempos.
Picasso nace en 1881. Con sólo 16 años pinta esta extraordinaria Ciencia y caridad. En 1901, este Autorretrato. De su "periodo azul", el famoso La vida que data de 1903. Dos años más tarde, este Acróbata y joven arlequín. Esta Familia de saltimbamquis de 1905 se considera de transición al "periodo rosa".
También se puede hacer con una miniatura de la imagen. En este caso hay que sustituir el texto del vínculo por <img src="http://rutadelaminiatura.jpg" />
Es lo que he hecho en el ejemplo de utilización en una web normal con alguna imagen obtenida en el 2º Encuentro.
10 comentarios:
Mi ordenador debe estar un poco obtuso, porque no veo nada, ni en orientaeduc, ni aquí ¿?
Creo en el blog no se ajusta el tamaño de la imagen y sí en la web, que además permite cerrarla
En mi mac, el efecto no funciona en Firefox, pero en Safari sí. Es algo diferente al que he instalado en mi blog, porque el plugin que yo monté no muestra el fondo oscuro, solo la imagen emergente. También lo he puesto en la web del encuentro. Es un simple plugin para Joomla. Puedes verlo en marcha en http://www.aulablog.com/arablogs-herramienta-de-creacion-y-mantenimiento-de-blogs-para-la-comunidad-educativa-aragonesa-2
Solo que aquí he "mezclado" dos pluigins: uno para que aparezca el texto a pie de página y otro para agrandar la imagen. Por eso me dió tanta lata. Todos se basan en scripts de código abierto creados por algún programador que luego otros adaptan a CMS como Joomla o WordPress.
Pues algo ha pasado.
Algo he hecho mal.
Lo probé primero en otro blog de Blogger que tengo para pruebas y se veía bien. Con Firefox y con Explorer. En Ubuntu no le he podido probar pues se me ha escacharrado el ordenata. Más bien se me ha desconfigurado la conexión a internet y no lo sé arreglar.
Puede ser algo relativo a las versiones del Blogger. El de pruebas no es la misma versión. Es la nueva. Éste es de las antiguas aunque hice la reconversión en su momento. En donde se ve bien es en la web. Con todos los navegadores. Al menos eso creo.
Por fin parece que ya funciona.
Mejor con Firefox que con Explorer. No sé en Ubuntu. Decidme algo.
Ya me funciona en FF para Mac y también en FF para Ubuntu.
Gracias Luis.
Ya he comprobado que lo has instalado en Aulablog.
A mí me sigue gustando más el tuyo. Es más sencillo. Y más limpio. Habrá que seguir investigando. Me alegra saber que se ve en Ubuntu.
Palabrita del Niño Jesús que yo no veo nada ¿? -con Firefox-.
Lourdes mira tu navegador... que le debe pasar algo. Es que con estos calores y los aires acondicionados... nos cogen unos pasmos... como mi Ubuntu el pobre :-(
Puff...he mirado en muuuchos blogs como hacerlo y el tuyo parece el más simple..pero es que no entiendo el primer punto.
"Sustituyendo las llamadas a los 3 archivos .js y a la hoja de estilos .css por sus rutas absolutas"
Que tres llamdas? Tres archivos .js? en lo que me descargado vienen 5 archivos ".js".. mm Puedes explicarmelo!?
Publicar un comentario