Rotador con transición (fade) para imágenes con enlaces | Oloblogger El Javascript que veremos más adelante sirve para lo que anuncia el título de la entrada, mostrar di...

19 de agosto de 2011

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
Copy URL

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

follow us in feedly

50 comentarios :

  1. gracias excelente aporte como siempre ahora mi pregunta como se puede hacer para que todo sea auto es decir no estar poniendo los enlaces de manera manual¿?

    ResponderEliminar
  2. I would like to say this is an excellent blog that I have ever come across. Very informative. Please write more so that we can get more details.

    Web Design

    ResponderEliminar
  3. Osea que si uso post resumidos, podre usarlo en cada post individual cierto? :)

    ResponderEliminar
  4. Gracias! Men! xDD me ha quedado muy bien! Gracias de nuevo:)

    ResponderEliminar
  5. NOTI Q-LOS, no se me ocurre cómo un programa podría ADIVINAR qué imágenes/enlaces son los que tú deseas poner :S

    Thanks Boundless Technologies

    Así es Deus Ex Machina, con los posts resumidos no creo que te de problema.

    No hay qué Antonio :D

    ResponderEliminar
  6. Gracias :D, buena entrada

    ResponderEliminar
  7. Buenas tardes, soy nuevo desde hace unos meses haciendo mi propia pagina y no logro obtener un buscador que busque en mi pagina, intente con el que biene para agregar en gadget pero no busca en mi blog :S o sea dice que no encuentra resultados cuando en realidad ai miles, y cuando huzo este que posteaste solo muestra una entrada, yo he visto que tu buscador el que tienes en la cabecera es perfecto en cuanto a su funcionalidad, podria preguntarte como lo hiciste :)?
    desde ya muchas gracias por tu tiempo.

    ResponderEliminar
  8. De nada Nac-Ho :)

    Lighuen, contestado en http://goo.gl/4556I

    ResponderEliminar
  9. Holap, te tengo una pregunta.. no se si ya lo has explicado... en ese caso disculpa, pero no lo encontré D:

    como hacer para crear un post, con por ejemplo un video, que se subió a megavideo, a youtube, y a un servidor X, entonces para ahorrar espacio solo se pone un sitio en donde se ven los 3 vídeos, y en la parte de arriba dice, Opción 1, Opción 2, Opción 3, para que el usuario pueda escoger el que mas le guste.

    Lo lamento, pero creo que esa es la mejor manera de poder explicarme D:

    ResponderEliminar
  10. Disculpa, averigüe un poco, y párese que es un sistema de Tabs Css, o algo así D:

    ResponderEliminar
  11. Hola, gracias por tus aportes, me surgio un problema con los gifs animados y ya lo pude resolver viendo los posts anteriores.
    Continua con tu excelente emprendimiento...

    ResponderEliminar
  12. Excelente script, fácil y embellece entradas o sidebars. Mis felicitaciones y agradecimiento.

    ResponderEliminar
  13. Nac-ho, así es, eso se suele llamar tabs y hay muchos scripts y sistemas CSS para conseguirlo. Servidor sólo ha publicado uno que no sé si te cuadrará, pero buscando en la Red seguro que te salen otros. Es este y está basado en un script: Gadget de solapas

    Kito@, seguimos. Despacio pero seguimos. Gracias.

    Pela, está bien pero no olvides que siempre hay varias formas de conseguir cosas similares y que lo que publico puede ser lo mejor para unos y no tan bueno para otros. Si este te complace, me alegro. Un saludo.

    ResponderEliminar
  14. Muy buen aporte amigo, te hago una consulta: Se podría lograr que tome las imágenes automáticamente desde un album de Picasa?
    te lucirías! abrazo.

    ResponderEliminar
  15. Gabriel, desde luego que me luciría, pero para eso tendría saber cómo manejar el feed de Picasa y en eso estoy muy verde :)

    ResponderEliminar
  16. Gracias...quedó bonito. Puse otro y me dió problemas yo creo que habían conflictos entre scrips pero este aunque no es muy vistoso funciona muy bién.

    ResponderEliminar
  17. Hola oloblogger hace tiempo puse este gadget como si fuera un visor.

    Ahora quiero añadir 1,2,3 si yo quiero darle al numero 2 pues se va a al dos como lo puedo hacer me entiendes?

    mi blog; www.pequemundossims.blogspot.com

    ResponderEliminar
  18. http://vagabundia.blogspot.com/2011/10/liteaccordion-un-acordeon-para-jquery.html

    mira este articulo lo podrias poner en tu blogg tb, el unico problema es que no entiendo como colocar el scrip en mi blogg

    ResponderEliminar
  19. asi que te voy a agradecer si lo explicas mejorr ke vagabundiaa

    ResponderEliminar
  20. Antonio esto siempre tiene la misma cadencia entre imágenes y no se pueden seleccionar las que quieras. Lo que tu necesitas es un "slider", pero tendrás que buscar, porque por aquí nunca he publicado ninguno.

    Rodrigo, el tema está explicado pero quizás lo que echas de menos es que sea con más detalle, pero eso precisamente es lo que aquí no puedo hacer, aunque intentaré explicarlo de otra manera.
    Se supone que primero te bajas un fichero .css y otro .js desde Github. El script (.js) lo alojas en algún sitio bajo tu control.
    Luego llamas -si no lo tienes ya- a la librería jQuery y también al nuevo script que te habías bajado, usando la dirección de tu alojamiento.
    Eso es lo que explica Vagabundia al principio, dando una segunda opción para el script, que sería meterlo directamente en la plantilla.
    Luego habla del estilo, que es el fichero .css que te has bajado también. Ese código va entre etiquetas STYLE y no se dice allí, pero también puedes ponerlo sin esas etiquetas entre los dos SKIN de tu plantilla.
    Por último, una vez puesto todo eso en su sitio, sólo falta poner el HTML con las imágenes, usando la estructura que al final del post se indica.
    Como parece que el problema principal es el script del acordeón, amplio un poco esa parte.
    Hay una parte dónde dice "...o lo agregamos directamente en al plantilla,...". Ahí de lo que se trata, es precisamente de alojar el script. Sólo tienes que copiar ese código antes de tu /head y en lugar de la frase " ....... aquí pegamos el contenido del archivo liteaccordion.jquery.js .......", colocar TODO el código que hay en el fichero .js.

    ResponderEliminar
  21. holaa!! soy nueva en esto y para serte sincera no entiendo nada es chino basico para mi me podrias ayudar en hacer un rotador de imagenes como en esta pag??: http://www.mientraslees.com/2011/11/edicion-coleccionista-y-guias.html

    ResponderEliminar
  22. Fresa, lo siento pero no tengo nada de eso por aquí. Tendrás que buscar, pero no un rotador, sino un "slider" que así es cómo se llaman ese tipo de gadgets.

    ResponderEliminar
  23. Hola!! muy bueno y fácil de aplicar, habría alguna forma de que la siguiente foto apareciera mas lentamente y no de golpe?

    ResponderEliminar
    Respuestas
    1. Supongo que no tiene que ser difícil, pero evidentemente habría que cambiar el código. En el mismo hay una dirección con el crédito al autor. Quizás en su página lo tenga ya hecho o puedas preguntarle, que a buen seguro te contestará mucho antes de que lo pueda hacer yo.

      Eliminar
  24. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  25. Hola Oloman, me interesaría saber como consigues ese efecto en el rotador para que te salte a un lightwindow con las mismas imágenes que utilizas (se me ha ocurrido aplicar el diseño como una posible alternativa a un scroller de imágenes ya que podría hacer que el rotador fuera más fino, sin abarcar toda la imagen, e invitar a los usuarios a pinchar sobre ella para acceder a la galería a modo de visualizador)

    ResponderEliminar
    Respuestas
    1. Pues en un principio lo hice utilizando la librería Lightwindow, a la que puedes acceder mediante el enlace en el post. Pero después tuve que desinstalarla y simplemente funciona con el sistema Lightbox que viene de serie con Blogger. Al detectar las imágenes, el sistema las muestra en esa ventana modal.

      Conclusión: No hay que hacer nada especial mas que activar el lightbox desde el escritorio.

      Eliminar
    2. He realizado lo que te comenté (el resultado está aquí: http://www.aplusarquitectos.com/p/arquitectura.html y aquí: http://www.aplusarquitectos.com/p/interiorismo.html) el único problema que tengo ahora es que, si observas la primera url, las imágenes que pasan tienen cielos despejados en la parte de arriba, con lo que el resultado no resulta tan agradable como en el otro (al ser imágenes de interiores siguen habiendo detalles que pueden invitar a clicar en las imágenes), ¿habría alguna forma de hacer que las imágenes del rotador coincidiesen con este por la parte central o la de abajo en lugar del típico "top left"?

      Eliminar
    3. Ahora entendí exactamente lo que querías decir en tu primer comentario. Prueba esto:
      #rotator img {
      border: 0;
      padding: 0;
      width: 100%;
      position: relative;
      top: -200px;

      }

      El position y el valor del top es lo que te "baja" la imagen.

      Eliminar
    4. Oloman, ¿Que debo de hacer para cuando cliqueen las imagenes no se valla a un enlace, si no que habra el lightbox?
      porque quiero poner imagenes en las entradas y creo que esto es super factible

      Eliminar
  26. Muchísimas gracias, ahora ha quedado con el aspecto que esperaba conseguir,
    Saludos.

    ResponderEliminar
  27. como seria el codigo si empezara la imagen en fade out o transparente

    ResponderEliminar
    Respuestas
    1. No sé si funcionará, pero prueba a añadir un display:none; aquí:
      #rotator img {
      border: 0;
      padding: 0;
      width: 100%;
      display: none;
      }

      Eliminar
  28. otra pequeña duda. introduje el script en otro DIV y no funcionó.
    Pues las fotos aparecian una de bajo de otro haciendo el efecto.
    Como haría para introducirló dentro de otro DIV?

    ResponderEliminar
    Respuestas
    1. Si lo que quieres es usar dos rotadores de estos en una misma página, pues no se puede. Es el inconveniente de trabajar con ID en lugar de clases, que las ID tienen que ser únicas.

      Eliminar
  29. primero gracias por tu atención.
    Posiblemente no me he expresado bien.
    Lo que digo es que tengo un div central que representa la pagina. Dentro del div central tengo un segundo div con una foto de fondo.Y me gustaria que el div que comporta el rotador estuviera dentro de ese segundo div. Pero al incrustrar el div del rotador dentro del segundo div, aparecen, en mi caso, las 3 fotos que voy a rotar, una debajo de otra haciendo el efecto de desaparecer y no como tu lo habias hecho.
    Gracias otra vez

    ResponderEliminar
    Respuestas
    1. Tendría que verlo, pero supongo que el segundo DIV tiene un fondo (background) y no una imagen (IMG). Si fuera lo segundo es fácil que te de problemas. Prueba sin imagen de fondo hasta que compruebes que funciona y luego añade ese fondo. El hecho de que haya dos cajas (DIV) por encima de la del rotador no debería suponer ningún problema salvo que esos DIV tengan propiedades que interfieran de alguna manera. Sólo comentas lo del fondo así que sólo puedo suponer que sea eso...

      Eliminar
  30. ¿Esto es lo que ha introducido ya por defecto blogger no?

    ResponderEliminar
    Respuestas
    1. No. Lo que Blogger da desde hace un tiempo es un sistema de ventanas modales que consiste en que pinchas una imagen y esta se hace más grande (hasta dónde su tamaño permita) oscureciendo todo la ventana a su alrededor.

      Lo de este post es para mostrar un carrousel de imágenes en el mismo espacio. Lo de añadirle una ventana modal (lightwindow) era sólo para que se viera que se le podían añadir más cosas.

      Eliminar
  31. Hola:Como pongo solo las imágenes sin enlaces?Muchas gracias

    ResponderEliminar
    Respuestas
    1. A la relación de imágenes (último trozo de código) quítale las etiquetas A, la de apertura con el enlace y su correspondiente cierre y deja sólo las imágenes (IMG).

      Eliminar
    2. Muchas gracias.¿Cómo puedo poner dos en una página estática?Lo intenté y uno me anula al otro.¿Pueden ponerse dos en una misma página o no es posible?

      Eliminar
    3. No es posible. Cuando algo lleve una ID y no una class (las primeras llevan una # como distintivo), sólo puede haber un elemento de ese tipo por página y este script usa ID.

      Eliminar
  32. Hola de nuevo: Es que quería ponerlo con imágenes verticales, pero ya he leido que no se puede
    Un saludo

    ResponderEliminar
    Respuestas
    1. No entendía muy bien lo que querías, así que me alegro de que lo hayas solucionado solo :)

      Eliminar
  33. El unico detalle que falta arreglar es, como le hago para que la ultima imagen se pueda desvanecer? solo la ultima se desaparece rapido y enseguida aparece la primera imagen

    ResponderEliminar
    Respuestas
    1. Está solucionado e hiper-simplificado, pero en otra entrada más moderna :)

      Eliminar
  34. Hola ( Oloman )

    Espero que me puedas ayudar con mi dilema...

    Lo que sucede es que coloque este genial (script) en mi blog pero no funciona la opción de transición al parecer el motivo es que tengo otro (script) que realiza la función " Mostrar las Últimas entradas por categorías con imagen en miniatura " al parecer ahí un conflicto entre los dos.

    El otro (script) se encuentra en la siguiente dirección. (http://www.ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html)

    Me gustaría poder mantener los dos funcionando en mi Blog, me podrías ayudar a buscar una solución.

    Gracias de antemano por tu ayuda...

    ResponderEliminar