JMiur [E]

"¿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>









17 comentarios:

Felipe Calvo Cepeda  

El slideshow es fenomenal y muy bonito, esos desplazamientos son geniales y practicamente todo con CSS.
Aguante la doctora Gem@. :)

Responder
Unknown  

Talindo. Aunque hacerlo parece complejo. ¡Gracias por compartirlo!

Responder
Unknown  

Ustedes no entienden que me levanto muy temprano, a pesar de los anteojos nuevos leo mal...¿será una clase de medicina?

Este me gustó más que el anterior, entonces a ponerlo acción :P
Gracias Jmiur, cómo trabajan esas neuronas mare mía!

Responder
Beben Koben  

awesome master :O
this is a rock \m/

Responder
Rodrigo Acuña Bravo  

Hola, el slide me funciona perfecto pero me surge un problema con el centrado...no se van todas las imágenes al centro si no que se me salen del cuadro...te dejo el enlace para que lo puedas chekar y aconsejarme por fa !!

Gracias de antemano
Saludos desde Chile !

http://rodrigoacunabravofotografia.blogspot.com/2011/03/en-concierto.html

Responder
JMiur  

Felipe:
A mi también me gusta este nuevo juguetito :D

Daniel Paredes:
No, no es tan complejo como parece. Es cosa de paciencia.

Graciela:
Prueba y me cuentas :D

Saludos, Beben Koben :D

Rodrigo Acuña Bravo:
No se trata de este de este ejemplo sino de otro; no recuerdo cuál pero no importa. Lo que debes hacer es redimensionar las imágenes o forzxar a que tengan un tamaño en:

#image img {
.......
height: valorpx;
width: valorpx;
}

con valores que dependen del tamaño del rectángulo donde van a ser mostradas, incluyendo sus márgenes , paddings y bordes.

Responder
Cocina  

Es excelente!lo instale en mi blog de pruebas y funciona muy bien,la
unica duda que tengo es que no aparece ninguna linea de marco como el que mostras.
saludos!

Responder
JMiur  

Los bordes y esos detalles, son los definidos acá:
#contenedor2 {
.......
}
debería ver tu ejemplo para decirte si falta algo en tu demo.

Responder
Gem@  

jajajajaja estaba limpiando la bandeja de correo y encuentro esta actualización ¿qué habla de Gem@ y del transicionismo crónico?
Más que grave yo diría que gravisimo por lo contagioso.
Me encantó ver una obra de dhteumeuleu reducida, lista y preparada :)

Responder
Manuel Alberto  

Buen día JMiur.

Use este slideshow, mediante un blog auxiliar.

Los errores que se muestran en el post, no he podido ubicarlos,

Avibert

En el CSS, tengo asignado #fff para el color del título del panel de navegación; y con respecto al recuadro asigné distintos valores a marginwidth y marginheigh del iframe, para que el recuadro se complete, pero no resultó.

Dónde puedo buscar esos errores?.

Saludos y gracias anticipadas por cualquier ayuda que puedas darme. :)

Responder
Manuel Alberto  

Actualizo info.

Solucioné el tema del recuadro asignando 40px mas tanto al ancho como al alto del iframe.

Sigo peleando con el color del título, :D

Responder
Manuel Alberto  

Nueva info.

Coloqué en .title, "color: #fff !important;" y no se produjo ningún cambio.

En IE9 y Chrome, no se ve el iframe.

Sigo buscando soluciones, :)

JMiur  

El blog donde esta el ejemplo es privado asi que no puede verse el contenido del iframe.

Por las dudas aviso que en IE9 las transiciones no funcionan, sólo en IE10 en adelante.

Responder
Manuel Alberto  

Habilitado el acceso al blog auxiliar.

No se vé nada de nada en IE9 y Chrome.

Responder
Manuel Alberto  

Ahora se ve el slideshow en los tres navegadores.

El título sigue sin solución.

Apliqué varias modificaciones a los atributos del .title y el navegador no los lee. :(

JMiur  

No los lee porque la clase no se llama title sino title2 o por lo menos, eso es lo que dice tu código fuente.

Responder
Manuel Alberto  

Ahora si. Todo funcionando bien.
Gracias JMiiur, :)

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