Antes y después. Visor de imágenes deslizantes siamesas | Oloblogger Este es el típico jueguecito de las dos imágenes solapadas que mediante un control hacemos que apare...

24 de abril de 2015

Antes y después. Visor de imágenes deslizantes siamesas

Este es el típico jueguecito de las dos imágenes solapadas que mediante un control hacemos que aparezcan alternativamente, pudiendo graduar su visibilidad desde 0 a 100 pero pasando por todos los puntos intermedios de su ancho.

Hay muchos sistemas para conseguir el efecto, pero como nos gusta ponéroslo fácil y además actualmente interesa que las cosas sean adaptables a todos los anchos de pantalla, he escogido un plugin jQuery de ZURB Studios llamado TwentyTwenty -supongo que como juego de palabras relacionado con la expresión fifty-fifty- que cumplía los dos requisitos.

Lo que es el JavaScript lo he comprimido y adaptado un pelín, para que podáis alojarlo en vuestra propia plantilla (esta vez sin bromas) y así no tener que cargarlo desde un alojamiento externo.

Con el CSS más o menos lo mismo, para así daros todo en dos partes de sólo copiar y pegar. En todo caso el JS es complicado de explicar, así que me ahorro ese paso.

A continuación la demo y seguimos. Probando...

AntesDespués


Los pasos a seguir para montar esto son sólo dos:

1. Editar la plantilla e insertar el contenido de este fichero que contiene el CSS y el JavaScript principal, justo antes de </head>. Guardar cambios.

2. Añadir a la entrada (o en un gadget) en la que queremos mostrar el antes/después, este código:
<div id="beforeafter" class='twentytwenty-container'>
<img src="URL_IMAGEN_ANTES" alt="Antes">
<img src="URL_IMAGEN_DESPUES" alt="Después" />
</div>
<script>$(window).load(function() {
$("#beforeafter").twentytwenty();
});</script>

Evidentemente, URL_IMAGEN_ANTES tiene que ser sustituido por la dirección de una imagen y URL_IMAGEN_DESPUES por la otra. Es importante que ambas sean exactamente del mismo tamaño, de lo contrario este artilugio no funcionará.

Notas
  • Si ya tienes jQuery en tu plantilla para otro fin, puedes eliminar la primera línea copiada en el paso 1 y que es la que carga precisamente esa librería
  • #beforeafter es el contenedor general del visor y en ese selector es dónde podéis configurar el ancho mínimo o máximo si fuera necesario, así como añadir un borde o cualquier otra cosa que permita CSS
  • Si siempre se va a ver un único antes/después por página (un único visor en cada entrada), las tres últimas líneas del paso 2 se podrían poner directamente en la plantilla, a continuación de lo que copiamos en el paso 1.
  • Si vas a usar más de un visor por página entonces tendrás que replicar el código completo del paso 2 para cada uno que quieras poner de más. En este caso la ID #beforeafter del contenedor habrá que cambiarla para cada visor, de manera que por ejemplo la segunda debería ser #beforeafter2, la tercera #beforeafter3, etc.
    De la misma manera y con la misma ID habrá que cambiar la parte JavaScript en la línea $("#beforeafter").twentytwenty();. Ejemplo para una segunda caja:
    <div id="beforeafter2" class='twentytwenty-container'>
    <img src="URL_IMAGEN_ANTES" alt="Antes">
    <img src="URL_IMAGEN_DESPUES" alt="Después" />
    </div>
    <script>$(window).load(function() {
    $("#beforeafter2").twentytwenty();
    });</script>
  • En .twentytwenty-before-label:before{content:"Antes"} es dónde podéis cambiar la palabra o etiqueta que sale a la izquierda.
  • En .twentytwenty-after-label:before{content:"Después"} es dónde se puede cambiar la palabra del lado derecho.

Y ya está, esto es todo lo que necesitáis para tener un visor de este tipo.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

12 comentarios :

  1. Hola oloman, perdón por preguntar algo diferente al post, pero he estado buscando en tu blog y no encuentro la respuesta. Que debo de hacer para que mi Blog se vea con la imagen del tuyo? Es decir en la versión móvil el tuyo se ve igual que en la versión pc. Además de que tu pagina carga bien rápido. Se que existe una opción para ver el blog como en pc pero es molesta porque no es automática ni se adaptan bien las entradas. Gracias feliz tarde.

    ResponderEliminar
    Respuestas
    1. Hola Rob. Tienes dos opciones, o usar una de las plantillas móviles que te da Blogger de serie y que podrás encontrar en el Escritorio > Plantilla, justo a la derecha de la Edición HTML o bien usar alguna plantilla prediseñada que sea adaptable (también llamadas RWD o responsive).

      Eliminar
  2. No he podido hacerlo mira. http://www.ecualinkblog.com/2015/05/el-antes-y-el-despues-del-terremoto-en.html

    ResponderEliminar
    Respuestas
    1. Quizás si hicieras lo que expliqué...
      Jesús, no tienes nada de lo que dije puesto, sólo una imagen dentro de la tabla. No sé si es que te quieres hacer publi o algo así, pero los enlaces en los comentarios no cuentan para nada.

      Eliminar
  3. Muchas gracias por el tutorial Oloman.
    Si alguien lo quiere ver en funcionamiento, yo lo he implementado en esta entrada.

    ResponderEliminar
    Respuestas
    1. Perfecto David. Y por si no te lo he dicho anteriormente, muy bueno tu blog ;)

      Eliminar
  4. Muchísimas gracias. Todo me ha salido bárbaro. Sólo me queda una pequeña duda... Si uno quisiera aplicar distintas etiquetas, ¿hay que modificar y repetir el código del paso 1 por cada par de etiquetas distintas? Lo he hecho así y me ha dado resultado, pero estimo que debe haber una solución más sencilla, sin tanto código, ¿no? Nuevamente, gracias mil.

    ResponderEliminar
    Respuestas
    1. Hola Moni
      El código del paso 1 sólo hay que ponerlo una vez en cualquier caso. Es el del paso 2 el que habría que duplicar (con otro selector distinto) en el caso de que se quiera poner más de un visor por página.

      Eliminar
    2. Hola. Sí, eso lo entendí: más de un visor pero con las mismas etiquetas. Lo que quiero lograr es colocar más de un visor, pero con DISTINTAS etiquetas; por ejemplo, ZURDOS-DIESTROS y ANTES-DESPUÉS. El tema es que las etiquetas se cambian desde el js. Y si cambio para un caso puntual, también se cambian para el resto. ¿Estoy equivocada? Gracias mil.

      Eliminar
    3. No Moni, se cambian desde el último trozo de código que ves en esta entrada. Precisamente está comentado ese asunto a continuación.

      Eliminar
  5. Hola Oloman, muchas gracias por los tutoriales, de éste sitio se puede aprender muchas cosas, siempre me han interesado los post de éste blog, éste concretamente cuando lo vi se me encendio una luz y decidí aplicarla a El Triángelo una de las paginas de mi blog y el resultado es impresionante, ya que se trata plasmar el paso del tiempo en una aventura que ocurrió hace 57 años.
    Hace unos cuantos días puse la página estática de portada del blog y quedo fabulosa, muy original
    Saludos y gracias por todo. Aceliano

    ResponderEliminar
    Respuestas
    1. Sí, claro. Este gadget es ideal para cosas como esas de mostrar el mismo sitio pero en épocas muy distintas.

      Gracias por hacerme saber que algunas cosillas te fueron útiles ;)

      Eliminar