Más transiciones, sliders y slideshows

Esta es una variación del ejemplo anterior donde se utilizaban transiciones para crear algo similar a un slider de imágenes.

En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.

Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:

<div id="demoANIM2">
  <div id="demoANIM2imagenes">
    <img id="img_1" src="URL_IMAGEN1" class="visible" />
    <img id="img_2" src="URL_IMAGEN2" class="novisible" />
    <img id="img_3" src="URL_IMAGEN3" class="novisible" />
    <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
    <img id="img_7" src="URL_IMAGEN7" class="novisible" />
  </div>
</div>
<div id="demoANIM2links">
  <a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
  <a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
  <a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>
  <-- agregamos un enlace para cada una de las imágenes -->
  <a onclick="srcdemoANIM2(7);" href="javascript:void(0);">7</a>
</div>

La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que querramos mostrar por defecto y class="novisible" en el resto de ellas.

Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:

<style>
  #demoANIM2 { /* es el DIV contenedor */
    /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
    height: 375px;
    width: 500px;
    margin: 0 auto; /* lo centro */
    overflow: hidden; /* impido que se deborde */
    position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
  }
  #demoANIM2imagenes img { /* las imágenes */
    /* lo fijo arriba */
    position:absolute;
    left: 0;
    top: 0;
    /* fuerzo a que las imágenes se vean todas iguales */
    height: 375px;
    width: 500px;
    /* y le digo que cualquier cambio sea animado */
    -moz-transition:all 1s ease-in-out;
    -webkit-transition:all 1s.ease-in-out;
    -o-transition:all 1s.ease-in-out;
    transition:all 1s ease-in-out;
  }
  #demoANIM2imagenes img.visible { /* la imagen es visible */
    opacity:1;
    filter: alpha(opacity=100);
  }
  #demoANIM2imagenes img.novisible {  /* la imagen está oculta */
    opacity:0;
    filter: alpha(opacity=0);
  }
  /* y le pongo un poc de estilo a los numeritos que sirven de enlace */
  #demoANIM2links {
    border-bottom: 1px solid #345;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 500px;
  }
  #demoANIM2links a {
    background-color: #345;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 4px #ABC inset;
    margin: 0 2px;
    padding: 4px 8px;
  }
  #demoANIM2links a:hover {
    box-shadow: 0 0 8px #ABC inset;
    color: #FFF;
  }
</style>

Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:

<script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_1";

function srcdemoANIM2(num) {
  // la imagen a ser mostrada
  var id = "img_" + num;
  var mostrar = document.getElementById(id);
  // la que ahora esta visible
  var actual = document.getElementById(imgvisible);
  // si son la misma no hago nada
  if(mostrar==actual) {return false;}
  // permutos su clase ocultando la visible y mostrando otra
  actual.className="novisible";
  mostrar.className="visible";
  // y guardo ese dato
  imgvisible = id;
}
//]]>
</script>

En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.

1234567