Otro slideshow de dhteumeuleu.com

Este es un sildeshow muy particular. No es para copiar y pegar aunque puede hacerse si uno lo desea y no quiere tocar nada de nada sino que es otra de esas maravillas a las que nos tiene acostumbrados Gerard Ferrandez y es un experimento al que ha llamado The trip of a lifetime.

Obviamente, el original es mucho más espectacular que la versión que se ve en esta entrada pero había que intentarlo y adaptarlo a este espacio mucho más pequeño y con las limitaciones que tiene cualquier blog.

En problema no es sólo definir el tamaño y modificar los parámetros sino tambien tratar de resolver el carácter # que se usa para los enlaces y que, pese a haber intentado todo lo que se me ha ocurrido, en Blogger, siempre es una dificultad ya que al hacer click, el navegador se "mueve" hacia arriba como si el enlace fuera un anclaje. La solución en este caso, fue un blog auxiliar y colocar todo en un IFRAME.

El HTML a utilizar es muy simple:

<!-- coloqué todo en un contenedor -->
<div id="contenedor">
  <!-- este es el slideshow -->
  <div id="screen">
    <!-- acá se mostrarám als imágenes como fondos -->
    <div id="pane">
      <div id="page1"></div>
      <div id="page2"></div>
      <div id="page3"></div>
      <div id="page4"></div>
      <div id="page5"></div>
      <div id="page6"></div>
      <div id="page7"></div>
      <div id="page8"></div>
      <div id="page9"></div>
    </div>
    <!-- esta es la pequeña ventanita de navegación -->
    <div id="nav">
      <div class="title">ejemplo slideshow</div>
      <a href="#page1" class="scrollTo"></a>
      <a href="#page2" class="scrollTo"></a>
      <a href="#page3" class="scrollTo"></a>
      <a href="#page4" class="scrollTo"></a>
      <a href="#page5" class="scrollTo"></a>
      <a href="#page6" class="scrollTo"></a>
      <a href="#page7" class="scrollTo"></a>
      <a href="#page8" class="scrollTo"></a>
      <a href="#page9" class="scrollTo"></a>
    </div>
  </div>
</div>

El estilo CSS puede ser agregado a la plantilla o directamente en una entrada:

<style>
  #contenedor { /* tiene la dimensión de las imágenes a usar /*
    height: 400px;
    margin: 0;
    padding: 20px; /* si se quiere ponerle un borde */
    width: 550px;
  }
  #screen { /* el slideshow */
    height: 400px;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 550px;
  }
  #pane { /* donde se mostrarán las imágenes */
    position: absolute;
    top: 0;
    left: 0;
  } 
  #nav { /* la ventana de navegación  */
    background-color: #000;
    left: 0;
    margin: 0;
    padding: 5px;
    position: fixed;
    top: 120px;
    width: 93px;
  }
  #nav a { /* los enlaces son cuadraditos */
    background-color:#333;
    float: left;
    height: 25px;
    margin: 3px;
    overflow: hidden;
    text-decoration: none;
    width: 25px;
  }
  /* los colores de esos cuadraditos dependen de la acción */
  #nav a:hover, #nav a:focus {background: #F00;}
  #nav a:visited {background-color: #666;}
  #nav a:active, #nav a.active {background: #FFF;}
  /* la lista de las nueve imágenes y su posición inicial */
  #page1 {
    background: url(URL_IMAGEN_1) no-repeat center center;
    left: 0px; top: 0px; width: 550px; height: 400px; position: absolute;
  } 
  #page2 {
    background: url(URL_IMAGEN_2) no-repeat center center;
    left: 550px; top: 0px; width: 550px; height: 400px; position: absolute;
  }
  #page3 {
    background: url(URL_IMAGEN_3) no-repeat center center;
    left: 1100px; top: 0px; width: 550px; height: 400px; position: absolute;
  }
  #page4 {
    background: url(URL_IMAGEN_4) no-repeat center center;
    left: 0px; top: 400px; width: 550px; height: 400px; position: absolute;
  }
  #page5 {
    background: url(URL_IMAGEN_5) no-repeat center center;
    left: 550px; top: 400px; width: 550px; height: 400px; position: absolute;
  }
  #page6 {
    background: url(URL_IMAGEN_6) no-repeat right top;
    left: 1100px; top: 400px; width: 550px; height: 400px; position: absolute;
  }
  #page7 {
    background: url(URL_IMAGEN_7) no-repeat left center;
    left: 0px; top: 800px; width: 550px; height: 400px; position: absolute;
  }
  #page8 {
    background: url(URL_IMAGEN_8) no-repeat center center;
    left: 550px; top: 800px; width: 550px; height: 400px; position: absolute;
  }
  #page9 { 
    background: url(URL_IMAGEN_9) no-repeat right top;
    left: 1100px; top: 800px; width: 550px; height: 400px; position: absolute;
  }
   /* el texto del título de la ventana de navegación */
  .title {
    font-size:12px;
    font-family: Helvetica;
    color: #FFF;
    text-align:center;
    font-weight: bold;
    margin-bottom: 0.5em;
  } 
</style>

La clave de todo (es una forma de decir) se basa en el tamaño de las imágenes y las posiciones se calculan en función de eso, ubicándolas con left y top de manera absoluta:

Por último, el script que también puede ponerse en la plantilla (usando CDATA), en un elemento HTML o directamente en la entrada:

<script type="text/javascript">
var st = function () {
  var pages = [], links = [], tween = {}, div, pane, running, targetPage, currentPage, hashMode, oldHash, updateHash = true;
  function addEvent (o, e, f) {
    if (window.addEventListener) o.addEventListener(e, f, false);
    else if (window.attachEvent) r = o.attachEvent('on' + e, f);
  }
  var init = function (param) {
    pane = document.getElementById(param.paneID);
    div  = document.getElementById(param.containerID);
    var a = div.getElementsByTagName('a');
    var i = 0, p;
    while (p = a[i++]) {
      if (p.className && p.className.indexOf('scrollTo') >= 0) {
        var h = p.href.split('#')[1];
        var o = document.getElementById(h);
        if (o) {
          pages[h] = { div:  o, toX: -o.offsetLeft, toY: -o.offsetTop };
          links.push({ a: p, div: o });
          p.onclick = function () {
            goto( this.href.split('#')[1], param.duration );
            return false;
          }
        }
      }
    }
    if ("onhashchange" in window) {
      if (location.hash !== '' && location.hash !== "#") {
        oldHash = location.hash.substring(1);
        goto(oldHash, -1);
      } else goto(param.home, -1);
      hashMode = true;
      addEvent(window, 'hashchange', function() {
        if (location.hash.substring(1) !== oldHash) {
          oldHash = location.hash.substring(1);
          if (oldHash == "") {
            updateHash = false;
            oldHash = param.home;
          }
          goto(oldHash, param.duration);
        }
        return false;
      });
    }
  };
  var goto = function (href, dur) {
    tween.start = new Date() * 1;
    tween.duration = dur;
    tween.fromX = pane.offsetLeft; tween.fromY = pane.offsetTop;
    tween.toX   = pages[href].toX - tween.fromX; tween.toY   = pages[href].toY - tween.fromY;
    targetPage = href;
    if (!running) running = window.setInterval(scrolling, 16);
  };
  var scrolling = function () {
    var cTime = (new Date() * 1) - tween.start;
    if (cTime < tween.duration) {
      var cur = Math.cos(Math.PI * (cTime / tween.duration)) - 1;
      pane.style.left = Math.round(-tween.toX * .5 * cur + tween.fromX) + 'px';
      pane.style.top  = Math.round(-tween.toY * .5 * cur + tween.fromY) + 'px';
    } else {
      pane.style.left = Math.round(tween.fromX + tween.toX) + 'px';
      pane.style.top  = Math.round(tween.fromY + tween.toY) + 'px';
      window.clearInterval(running);
      running = false;
      currentPage = targetPage;
      var i = 0, p;
      while (p = links[i++]) {
        if (p.div.id == currentPage) {
          if (p.a.className.indexOf("visited") >= 0 ) {
            p.a.className = p.a.className.replace("visited", "active");
          } else p.a.className += " active";
          p.visited = true;
        } else if (p.visited) {
          p.a.className = p.a.className.replace("active", "visited");
        }
      }
      if (hashMode) {
        if (updateHash) {
          oldHash = currentPage;
          window.location.hash = currentPage;
        }
        updateHash = true;
      }
    }
    return false;
  };
  return {
    init : function (param) {
      addEvent(window, 'load', function () { init(param); });
    }
  }
}();
st.init({ containerID: "screen", paneID: "pane", home: "page8", duration: 1000 });
</script>