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

Scroll al inicio