Image rotator timed

Basándome en el plugin Header Image Rotator de MHough he desarrollado este plugin. Me he basado en la estructura de ese plugin para desarrollar este con una funcionalidad diferente, aunque la misma esencia, que es cambiar la imagen que se muestra en algún elemento del CSS. Lo he hecho para desarrollar una idea que tenía JRMora, al que debo la idea inicial por la que he desarrollado el plugin, las ideas de siguientes mejoras, y la labor de tester.

Pasos previos

Para que funcione, lo primero es preparar un poco el HTML, añadiendo un elemento donde se mostrará la imagen:

<div id=”personaje” > <img name=”personaje” /></div>

Luego, hay que añadir la carga del script en Javascript al comiendo de la página. Mientras averigüe como se hace manualmente, hay que cambiar

<body>

por

<body OnLoad=”rotateImage(‘personaje’)”

Si quieres cambiar cómo se muestra la imagen en la página, echando mano del CSS es muy sencillo, con algo como:

#personaje{
padding:0px;
margin:0px;
text-align:right;
float:right;
background-image:none;
}

Las imágenes que quieran mostrarse tienen que ir en la carpeta header-images que hay que crear en /wp-content. Puedes subir tantas imágenes como quieras.

Instalación y Activación

Una vez realizados estos cambios, la página estará lista para añadir el plugin. Lo ideal es que estos cambios se hagan automáticamente por el plugin, a medida que vaya avanzando en su desarrollo intentaré incorporarlo al plugin.

Luego, lo típico de todos los plugins, se sube a /wp-content y se activa en el menú de Plugins.

Opciones

Opciones del plugin

Las opciones disponibles son:

  • Selección aleatoria. Si se activa, la siguiente imagen a mostrar se escogerá aleatoriamente entre todas las que hay. Si se desactiva, se escogerán en orden secuencial (en orden alfabético).
  • Tiempo específico de rotación. Si se deja a cero, el plugin calculará el tiempo que tiene que mostrarse cada imagen de manera que no se repitan imágenes en un día. Por ejemplo, con 24 imágenes este tiempo será de 3600 segundos (1 hora). En caso se escoger un tiempo concreto, se usará el especificado.
  • Elemento CSS a rotar: el ID del elemento CSS que queremos rotar. Con el código de ejemplo que he puesto, esto habría de ser personaje, pero puedes poner lo que quieras.
  • A continuación se realiza una comprobación del directorio de imágenes, que debe existir para que funcione el plugin (obviamente), y se muestra una lista de las imágenes que contienes el directorio.

Es mi primer plugin, y estoy muy abierto a sugerencias de nuevas opciones o funciones así que, por favor, comentad todo lo que queráis bien directamente conmigo o a través de los comentarios.

Cambios

Versión 0.2:

  • arreglada opción de random, que no funcionaba.
  • añadida opción de escoger el tiempo de rotación.

Descargar.