Lightbox. Enlazar imágenes sin salir de la página

julio 12, 2007
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&#8221;, 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&#8221; rel=”http://rutadellightbox/lightbox&#8221; 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&#8221;;
var fileBottomNavCloseImage = “http://rutadelacarpeta/images/closelabel.gif&#8221;;

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&#8221; />
Es lo que he hecho en el ejemplo de utilización en una web normal con alguna imagen obtenida en el 2º Encuentro.
Anuncios

Del correo electrónico al blog pasando por Flickr

junio 19, 2007
Por Aníbal me entero de esta utilidad “mash-up” (no me gustan demasiado los “palabros” estos de las TICs pero es que éste lo acabo de asimilar…) herramienta que consiste en la unión de varias utilidades web para conseguir un objetivo integrado.
Se trata de enviar, por medio del correo electrónico, una imagen con un comentario textual y que esta imagen se integre como entrada en una bitácora. Es una herramienta de colaboración a la que se le puede sacar muchas utilidades didácticas. Aníbal lo planteaba para que los alumnos que se han inscrito en el curso que va a impartir en el País Vasco, le muestren un poco de la geografía de su territorio.
Vamos a explicar el funcionamiento de la aplicación integrada.
Para empezar, deberemos hacernos una (nueva) cuenta de correo en Yahoo. Una vez dados de alta con la nueva cuenta, nos damos de alta en Flickr con este mismo nombre de usuario y contraseña. Cuando la cuenta de Flickr ya esté lista, la asociamos a una bitácora que previamente tendremos que haber creado. Flickr nos dará una dirección de correo electrónico a la que cualquier persona pueda mandar la imagen y texto para la cuenta de Flickr que, a su vez, remitirá los datos al blog asociado.
Vamos a hacerlo con un ejemplo similar al creado por Aníbal.
El planteamiento consiste en enviar por correo electrónico a esta dirección called98writer2blog@photos.flickr.com la imagen de un cuadro de un artista del siglo XX con un texto en el que describas lo que te parezca interesante de esa obra. El asunto del mensaje será exactamente el título del cuadro y su autor, en el cuerpo del mensaje, pones la descripción o comentario sobre ese cuadro que creas oportuno. Adjuntas la imagen al mensaje e inmediatamente verás tu aportación publicada en este blog:
http://artedelsiglo20.blogspot.com/
así como en este espacio de Flickr:
http://www.flickr.com/photos/artedelsiglo20/
La carga del artículo es anónima. A no ser que, en el cuerpo del mensaje, quieras decirnos quién eres…
¿Te animas?
Nota: Si creas todo de nuevo, el funcionamiento integrado de las aplicaciones tarda un buen rato en ser efectivo (más de media hora…)