Plugin MultiPicFilmStrip para Coppermine Photo Gallery

En mi galería de fotos montada con Coppermine he realizado varios cambios y modificaciones, pero siempre me quedo con el amargo regusto de hacerlo deprisa y corriendo, sin dedicarle el tiempo que se merece, por ello hace un par de semanas me mire el sistema de plugins de esta galería de fotos. Me sorprendio, es fácil y sencillo, en escasos minutos tienes tu primer plugin de pruebas instalado, configurado y funcionando. Después de esa grata sorpresa monte un plugin que modifica ligeramente el comportamiento de la tira de fotos que sale debajo de la vista de imágenes.

El comportamiento por defecto de la tira de imágenes de Coppermine es avanzar una imagen por cada vez que hacemos clic en la flecha de avanzar o retroceder, y resulta un poco molesto para mi gusto tener que estar haciendo clics uno tras otro para moverme por varias imágenes. Con el plugin que he creado, esa tira de imágenes mostrará seis nuevas imágenes cada vez que hagamos clic en la flecha correspondiente.

Para hacer funcionar el plugin únicamente necesitas descargar el archivo, descomprimirlo y subir la carpeta "moveMultiplePicsOnFilmstrip" a la carpeta plugins de tu Coppermine. Después lo activaremos desde la configuración de plugins de Coppermine, no hay que configurar nada, y desde ese momento, las fotos de la tira de imágenes avanzará seis fotos por cada clic que realicemos. He creado un pequeño vídeo para ver el comportamiento antes y después de la activación del plugin.

Información para desarrolladores:

Hacer un plugin para Coppermine es extremadamente sencillo, me ha sorprendido gratamente, y si sueles meterle mano a tus aplicaciones web para que se comporten exactamente como tu quieres, en el caso de esta galería de fotos creo que merece la pena dedicarle unos minutos para entender el funcionamiento de su sistema de plugins y hacer que tus modificaciones sean reutilizables.

En mi caso tuve un pequeño problema, y es que el código Javascript que hace funcionar el comportamiento de la tira de imágenes o filmstrip, es el archivo "displayImage.js", y por algún motivo, este archivo siempre es el último en añadirse al array de códigos Javascript de la galería. Ello me provocaba que los cambios que yo hacia en el comportamiento de código Javascript se machacaran con el comportamiento original. Una primera solución evidente es tocar el archivo Javascript original, pero eso es una solución que requería de acciones extra aparte de la simple instalación y activación del plugin. Es decir era una solución poco elegante y bastante chapucera, por ese motivo, tras pensarlo un poco más se me ocurrió una solución mejor; lo que necesitaba era desactivar el handler de JQuery al evento clic de la flecha, pero para eso tenía que ejecutar el "unbind" después de que Coppermine cargara todos los Javascript. Esto lo solucione haciendo uso de una llamada a mi función con un delay no bloqueante como puede verse a continuación.

La función "nextPic(false)" es una copia de la función original que se ejecutaba con el clic, solo que modificada para que pueda llamarse varias veces seguidas. Concretamente la función se auto-llama a si misma cinco veces (más la llamada original, seis) provocando el avance consecutivo de seis fotos.

En un futuro realizaré una segunda versión de este código que en la activación del plugin pregunte el número de fotos a avanzar, de forma que se pueda configurar fácilmente si se desea que avancen más o menos fotos.

Por último comentar que un buen inicio para trabajar los plugins es ver como están creados otros plugins, puedes consultar muchos aquí. Y para comenzar el desarrollo puedes empezar con la propia documentación que ofrece Coppermine aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">