Transicionitis y el slideshow de dhteumeuleu.com

"¿Tiene usted transicionismo crónico?"

Dice Gem@ que su comentario no lo escribió ella sino su subconsciente pero poco importa ese detalle. Bien, diría yo ¿por qué no reconocerlo? SI ¿Será grave, doctor?

Así que acá vamos con el mismo slideshow originalmente llamado The trip of a lifetime y destruido por mi hace unos dias para poderlo probar en Blogger pero, ahora modificado aún más, haceindo uso y abuso de la propiedad transition para hacer casi lo mismo aunque claro, esta propiedad no es entendida por Internet Explorer pero igual, el slideshow seguirá funcionando normalmente.

No voy a inventar la rueda así que me basaré en lo que había antes que era bastante manual y seguiré en la misma línea para no complicarme la vida.

El HTML es similar:

<div id="contenedor2">
  <div id="screen2">
    <div id="pane2">
      <img src="URL_IMAGEN_1"/>
      <img src="URL_IMAGEN_2"/>
      <img src="URL_IMAGEN_3"/>
      <img src="URL_IMAGEN_4"/>
      <img src="URL_IMAGEN_5"/>
      <img src="URL_IMAGEN_6"/>
      <img src="URL_IMAGEN_7"/>
      <img src="URL_IMAGEN_8"/>
      <img src="URL_IMAGEN_9"/>
    </div>
    <div id="nav2">
      <div class="title2">ejemplo slideshow</div>
      <a href="javascript:void(0);" onclick="dtht(0,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,800);" class="scrollTo"></a>
    </div>
  </div>
</div>

Nuevamente, todo se basa en la posición de las imágenes; sabiendo que todas miden 550x400 (o yo las fuerzo a que midan eso), las pongo una al lado de la otra y dimensiono el contenedor (pane2) para que "se acomoden" formando un rectángulo de 3x3; eso, lo hago dimensionando ese contenedor para que mida tres veces el ancho y tres veces el alto de cada imagen.

Luego, se mete ese enorme rectángulo dentro de otro más pequeño y a ese, se le pone la propiedad overflow:hidden para que sólo muestre una parte.

Como ese enorme rectángulo con las nueve imágenes, está posicionado de forma asoluta dentro el otro, basta cambiar sus propeidades left y top para mostrar otro sector y, como además, ese rectángulo tiene la propiedad tarnsition, cada uno de esos cambios se mostrará animado.

Todo eso, se define en el CSS que en este caso es este:

<style>
  #contenedor2 {
    background-color: #000;
    border-radius: 4px;
    box-shadow: 0 0 5px #ABC inset;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    width: 550px;
  }
  #contenedor2 br {display:none;}
  #screen2 {
    height: 400px;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 550px;
  }
  #pane2 {
    font-size:0;
    height: 1200px;
    position: absolute;
    top: 0;left: 0;
    width: 1650px;
    -moz-transition:all 0.7s ease 0s;
    -webkit-transition:all 0.7s ease 0s;
    -o-transition:all 0.7s ease 0s;
    transition:all 0.7s ease 0s;
  }
  #pane2 img {
    height: 400px;
    width: 550px;
  }
  #nav2 {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    left: 0;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: 120px;
    width: 93px;
  }
  #nav2 a {
    background-color:#333;
    float: left;
    height: 25px;
    margin: 3px;
    overflow: hidden;
    text-decoration: none;
    width: 25px;
  }
  #nav2 a:hover, #nav2 a:focus { background: #F00; }
  #nav2 a:visited { background-color: #666; }
  #nav2 a:active, #nav2 a.active { background: #FFF; }
  .title {
    color: #FFF;
    font-family: Helvetica;
    font-size:12px;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-align:center;
  }
</style>

Por último necesitamos JavaScript porque queremos cambiar esa posición con un click así que nos falta la función que es muy pequeña:

<script>
function dtht(l,t) {
  var obj = document.getElementById("pane2");
  obj.style.left = -l + "px";
  obj.style.top = -t + "px";
  return false;
}
</script>

ejemplo slideshow