Deslizador “Antes y Después”. Recurso web de código libre

deslizador de Jansá cultura y tencología

Hace unos meses en la búsqueda de noticias para el blog de “Arqueología-Paleorama en Red” encontramos en uno de los medios que más utilizamos: “Daily Mail” que contaban con un recurso que nos pareció muy sencillo, pero a la vez muy visual y atractivo para por ejemplo: mostrar las diferencias entre fotos antiguas y actuales, fotografías y reconstrucciones virtuales, y muchas más utilidades.

Es una cosa de esas que nos gustaría ver más en las páginas web de entidades públicas o privadas y que ayudan a los aficionados a comprender mucho mejor lo que a veces está en nuestras cabezas de arqueólogos y a veces no sabemos expresar.

Como apostamos por el desarrollo del código libre, decidimos depurar su programación y ofrecerlo a todos aquellos que quieran aprovecharlo. En el archivo de descarga va el código .html, el .css y el .js

Allá que te va:


Descarga Deslizador

¿Qué os parece?

Instrucciones:
1.- Instalar todo en una misma carpeta de vuestro servidor
2.- Preparar las imágenes con una medida recomendada de 636 x 477 px
3.- Si queréis usar otro tamaño de foto deberéis tocar el porcentaje del width del id “contenedor” en el archivo .css . Puede que tengáis que trastear en otras etiquetas para ajustar las imágenes, probar en los width y height del .html

#contenedor { width: 75%;}

 

4.- Subir las imagenes a la misma carpeta y sustituid el nombre de las llamadas <img src=”…”> a las imágenes en el archivo .html, no os olvidéis de cambiar las dos imágenes y la etiqueta alt, es lo que saldrá cuando se pasa el cursor por encima de la imagen:

<img src=”puerta1.jpg” width=”636″ height=”477″ alt=”Puerta de Valmardón (Toledo). 2014″ class=”img-no-border”/ >

 

5.- Hemos visto algunos problemas de compatibilidad con el wordpress, pero se arregla instalando todo fuera e insertándolo en el post con la siguiente etiqueta:

<iframe src=”PONER URL PROPIA” width=”100%” height=”600.0rem”></iframe>

 

Nos queda optimizarlo para móviles. En teoría, tendría que funcionar pero si no os ha quedado claro, no os funciona en vuestro gestor de contenidos, estáis muy interesados o nos queréis invitar a algo:

info@appcultura.com