Rotador con transición (fade) para imágenes con enlaces

El Javascript que veremos más adelante sirve para lo que anuncia el título de la entrada, mostrar diversas imágenes con sus correspondientes enlaces, dentro del mismo espacio. Esto es lo que normalmente se entiende como rotar imágenes. Además lleva incorporado un efecto fade que consiste en desvanecer una imagen poco a poco y hacer aparecer la siguiente en el mismo sitio de idéntica manera.

Lo bueno que tiene es que es un código relativamente corto que se puede insertar en la plantilla directamente y que no es necesaria ninguna librería adicional. Por contra, presenta el inconveniente de que no se puede usar más de una vez por página. Esto quiere decir que se puede usar en la barra lateral si no se usa además en alguna entrada, ya que en ese caso nos fallaría uno de los dos cuando se viera esa entrada en concreto.

Pasa lo mismo si se usa en entradas sucesivas, que se muestran enteras en la página Inicio y en las de navegación. Al coincidir dos en la misma página, como se ha dicho, una de ellas no funcionaría.

Sin embargo, si el blog tiene entradas resumidas, tipo sumarios, el problema desaparece. La razón es evidente y es que en los sumarios no se cargaría el rotador, sino simplemente una imagen ilustrativa.

Aquí tenéis un ejemplo en funcionamiento en el que el enlace es la dirección original de cada imagen. Tiene añadido una ventana modal (lightwindow), pero eso es sólo para lucirme un poco :) y para que veáis una variante distinta del simple enlace a otra dirección:

El siguiente trozo de código es el que tenéis que insertar antes del </head> en vuestra plantilla. He puesto juntos la parte CSS y el script para facilitar su instalación y desinstalación, aunque lo más recomendado es poner cada cosa en su sitio, es decir el estilo con el resto del CSS y en el head, el script.

<!-- ROTADOR IMAGENES -->
<style type='text/css'>
#rotator {
border:0;
padding:0;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 500px;
height: 280px;
}
#rotator img {
border: 0;
padding: 0;
width: 100%;
}
</style>

<script type='text/javascript'>
//<![CDATA[
/* CREDITOS: http://slayeroffice.com/code/imageCrossFade/index.html */

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}

function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Una vez que tenemos esto en la plantilla, para crear un rotador de este tipo ya sólo hay que hacer una relación de imágenes con enlace y encerrarlo en un div con la clase rotator, como ya se ha dicho, bien en un gadget, bien en una entrada.

Para Blogger habrá que redactarlo todo quitando los saltos de línea para evitar efectos indeseados.

<div id="rotator">
<a href="URL_ENLACE1"><img alt="" src="URL_IMAGEN1" /></a>
<a href="URL_ENLACE2"><img alt="" src="URL_IMAGEN2" /></a>
<a href="URL_ENLACE3"><img alt="" src="URL_IMAGEN3" /></a>
<a href="URL_ENLACE4"><img alt="" src="URL_ENLACE4" /></a>
</div>

Los retoques personalizados que se pueden hacer están destacados en verde en el código y son los siguientes:

El width y el height de #rotator en la parte de estilo, es lo que marca el tamaño de la caja que contendrá las imágenes. Hay que tener en cuenta que esta caja no se adapta a las imágenes, sino al revés, estas se ven limitadas por la caja y ocuparán todo el ancho disponible redimensionándose proporcionalmente en altura.

Así, en un principio, todas deberán tener las mismas dimensiones o al menos ser proporcionales. Aunque no quede perfecto, tampoco hay demasiado problema si esto no es así, ya que lo que pudiera exceder del alto disponible simplemente no se verá. Con lo que si hay que tener más cuidado es con usar imágenes mucho más pequeñas que la caja, ya que al agrandarse se verán con una calidad mala. También hay que cuidar de no usar imágenes con formato vertical y una caja horizontal. El resultado no será muy bonito que digamos.

Otra posible configuración es la velocidad de cambio. En el script están programados 3 segundos (3000 milisegundos), pero en esta línea podéis cambiar ese valor:

setTimeout(so_xfade,3000);

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter