JMiur [E]

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>

9 comentarios:

Unknown  

Ingenioso 100%, es como un juego de fotografías cruzadas :D

Responder
Gem@  

Visitar a Gerard Fernández es como entrar en un mundo de magia, me encantó que este ejemplo no quede sólo en la contemplación y facilites el poder añadirlo "en alguna parte" :D

Responder
JMiur  

Sí, es ingenioso :D

Igual es complicadito, Gem@. Para adaptarlo a cada sitio tiene sus bemoles :-$

Se me ocurre que podría hacerse lo mismo usando sólo transiciones y CSS, habrá que ver :D

Responder
Gem@  

Tiene usted transicionismo crónico jajajaja perdón, perdón, no escribí yo fue mi subconsciente :S

Responder
JMiur  

Es un vicio :-D

Responder
Flenning  

De ese mismo sitio me gustó mucho "See her", tanto que también se me hizo vicio . Supongo que esta otra galería http://www.dhteumeuleu.com/further-caveats/ debe usarse de un modo parecido.

Responder
Flenning  

Eso del anclaje es complejo, además de cacofónico:)

Probé con otro slide de Gerard que me liberó de un conflicto pero me llevó a otros. El slide está en http://www.dhteumeuleu.com/not-in-vein/ y dejé mi versión la dejé en este sitio http://flenning.blogspot.com/. No sé cómo acomodar los tamaños del screen así que terminé haciendo trampa, claro. :O

Responder
Ros  

Excelente aporte a la creatividad.

Responder
Jorge MG  

para el tema del anclaje, lo mejor es añadir un return false:
<a href="#page1" class="scrollTo" onclick="return false;"></a>

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR