Mostrando imágenes grandes con Zoomify

Imagine que necesita mostrar una imagen muy grande en su página web. Una imagen jpeg de 640x480 mide alrededor de 100 KB y puede tardar un par de segundos en cargar en una conexión típica. Una imagen de 2000x3000 mide más de 1 MB y tardaría como un minuto.

Zoomify permite navegar sobre una imagen muy grande usando un componente flash que carga sólo las imágenes necesarias para mostrar cierta porción de ella. Es posible desplazarse, acercarse y alejarse.

Puede ver un ejemplo de uso directo de Zoomify aquí.

Instalación
Descargué ZoomifyExpress (disponible gratuitamente tanto para Windows como para Mac... pero anímese, más abajo describo cómo se puede usar con Drupal en Linux), y lo descomprimí. La carpeta resultante, ZoomifyExpress4, se puede colocar en cualquier lugar de su disco; no necesita instalación. Contiene tanto el visor flash ZoomifyViewer.swf, como el preprocesador de imágenes Zoomify Converter.exe, usado para generar los mosaicos que serán cargados por el visor según se requiera.

Uso
Al arrastrar el icono de la imagen sobre Zoomify Converter.exe, se creará, en el directorio que contiene los mosaicos de la imagen, una carpeta del mismo nombre, conteniendo los mosaicos que se necesitan.

Por ejemplo, la imagen Blossom.jpg es un jpeg de 1998x3024 y mide 1.42 MB. El directorio generado fué Blossom, que contiene al archivo ImageProperties.xml y al directorio TileGroup0, con 129 mosaicos de entre 2 y 14 KB.

TemplateWebPage.htm es una página cuyo código fuente muestra cómo se usa el componente. Hay dos lugares donde hay que colocar el nombre del directorio generado. Así, creo una página que contiene el código que se muestra en esta captura:


En Drupal
Está disponible el módulo Zoomify.

Luego de instalarlo, en la configuración verá 3 opciones para la generación de mosaicos: PHP, Python, o Ninguno.

Con PHP, se requiere que el sistema tenga GD, que es lo usual.

Con Python, se requiere que el sistema tenga instalado Python, el paquete Zoomifymage y PIL, la biblioteca Python para el proceso de imágenes. Además hay que bajar la biblioteca gcc.
Además, si elige esta opción hay que colocar la ruta de la carpeta que contiene a ZoomifyImage (por ejemplo /var/www/html/album/sites/all/modules/zoomify/ZoomifyImage).

Con Ninguno, el formulario presentará un campo extra para que podamos subir los mosaicos generados por nosotros mismos. Puede ser una opción si las imagenes son demasiado grandes para preprocesarlas en web.

Luego, puede indicar los tipos de contenido a los que se asociará Zoomify.

Cuando en alguno de esos tipos de contenido se intente mostrar una imágen más grande que la especificada en la configuración, aparecerá la pestaa adicional Zoomify.

Más memoria
Eligiendo PHP, encontré que en ciertos casos, al cargar una imagen, aparecía una pantalla en blanco. Después de un rato buscando y probando, encontré que se debía a que el proceso de imágenes grandes puede requerir de PHP más memoria que la que normalmente se le asigna (16 MB). Subí el valor a 96 MB (lo sugerido por ImageCache) y funcíonó bien a partir de allí.

Navegador oculto
Algunos usuarios prefieren que no se muestre el navegador. Para hacerlo, hay que indicar zoomifyNavigatorVisible=false

Comentarios

  1. y como puedo descargar una imagen que se encuentra en zoomify en internet? Saludos :)

    ResponderEliminar
  2. Zoomify fragmenta las imágenes. Se puede ver usando Chrome, F12, tab Resources, Images...

    saludos

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Debug con Xdebug y Aptana (y Notepad++)

CSS3 para mejorar el breadcrumb de un tema Zen