un blog
sobre Jimdo®
Crear nuevas imágenes prácticamente desde cero mediante la modificación de fotografías con Photoshop se ha convertido en un verdadero arte. Veamos cómo implementar la utilidad para mostrar las diferencias visuales entre dos imágenes.
Un website builder como Jimdo se antoja ideal para profesionales freelance de la fotografía (y del Photoshop). La manera tradicional que tienen dichos profesionales de mostrar en su portfolio el resultado final enfrentado al estado inicial es, evidentemente, insertar dos módulos imagen uno junto a otro. Huelga decir que no es la manera más elegante de proceder. Siempre hay una solución más elegante y eficaz, aunque suele estar asociada a una mayor complejidad en la ejecución (si estás leyendo esto es que ya has superado ese miedo inicial a "lo desconocido").
criterios de SELECCIÓN DE la solución
Realmente, a poco que busques verás que existen cientos de soluciones de terceros que te permiten crear un widget a modo de slide comparativo entre 2 imágenes, que es lo que buscamos. He puesto a prueba cinco o seis opciones en un espacio en Jimdo creado a tal efecto, seleccionando finalmente dos de ellas. Los criterios para dicha selección responden a:
- Sencillez. Es necesario insertar líneas de código en un módulo widget/html y en el head, lo que puede llegar a ser problemático (aunque reversible). Cuanto más sencilla sea la solución más facilidad de autogestión y menos problemas (incompatibilidades) encontraremos.
- Tamaño. Me refiero a la cantidad de código a implementar y sus dependencias (ver a continuación). En este caso menos es más, y a menor cantidad de líneas de código extra y mayor compresión del mismo mejor.
- Dependencias. Más allá de la necesaria llamada a la librería jQuery (biblioteca multiplataforma de JavaScript) he procurado que las soluciones seleccionadas incluyan solo pequeños eventos JavaScript. Nuevamente menos es más.
- Eficacia en dispositivos móviles. He observado que muchas de las soluciones testeadas no son tan amigables en smatphones y tables como sería deseable en cuanto a la usabilidad del widget. Los recursos más potentes desgraciadamente no cumplen con los requisitos anteriores (al menos las que he tenido oportunidad de probar). Algunas de ellas requieren de dependencias a la librería jQuery Mobile, que presenta ciertas incompatibilidades con Jimdo. Tengo que matizar que de las soluciones presentadas a continuación una es mucho más eficiente que la otra en este sentido.
Utiliza esta información bajo tu propia responsabilidad. Los recursos a continuación pueden requerir de conocimientos de programación web html/css/js. Aunque procuro testear el código en sitios web propios creados con Jimdo a tal efecto, no me hago responsable de posibles bugs, fallos o incompatibilidades que pudieran surgir por su uso. Actualizaciones de Jimdo y/o de las dependencias de terceros podrían provocar mal funcionamientos en el widget/plugin en cuestión. El proceso es reversible eliminando el código añadido.
slide 'antes y después' Nº1
El recurso a prueba Nº1 es el más sencillo de implementar de los dos seleccionados. Es fácil, sólo debes envolver dos imágenes dentro de dos contenedores "img_after" e "img_before". La primera imagen estará a la derecha, como resultado final, el 'después', y la segunda a la izquierda, como el 'antes'.
La estructura HTML a añadir en un modulo widget/html de Jimdo donde, para simplificar, también se especifican los estilos (CSS) sería:
<div class="before_after_slider" style="position: relative; width: 800px; height: 450px; margin: auto;">
<div class="img_after" style="position: absolute; width: 100%;">
<img src="https://url-de-tu-imagen-después.jpg" width="800" height="450" alt="" />
</div>
<div class="img_before" style="position: absolute; overflow: hidden; border-right: solid 4px #FFF;">
<img src="https://url-de-tu-imagen-antes.jpg" width="800" height="450" alt="" />
</div>
</div>
Donde debes sustituir el código entre comillas ("") https://url-de-tu-imagen-después.jpg y https://url-de-tu-imagen-antes.jpg por la URL de tus imágenes de después y antes respectivamente. Evidentemente tus imágenes deben estar alojadas en algún servidor a tal efecto. Si se trata de una plantilla personalizada no hay mayor problema, pues dispones de un espacio para subir tus archivos. Si se trata de una plantilla de Jimdo tendrás que usar un servicio de terceros (G. Drive, Dropbox, TinyPic...). Procura que dicho servicio para alojar imágenes no caduque y ¡ojo! que trabaje bajo protocolo de seguridad HTTPS o, de lo contrario, no será compatible con Jimdo.
Se hace necesario especificar el tamaño de las imágenes. En el ejemplo se han usado imágenes de 800px de ancho (width) por 450px de alto (height), cuyos campos puedes editar sustituyendo el número de píxeles donde se indique, según el ejemplo, 800 (para el ancho) y 450 (para el alto).
El siguiente paso es añadir el código JavaScript en el <head> de nuestra plantilla de Jimdo (ruta: Menú > Ajustes > Editar head). Para ello primeramente debes hacer referencia a la librería jQuery. Añade lo siguiente en la ventana de edición del <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
</script>
Nota: En el supuesto de que hayas enlazado en otra ocasión con la librería jQuery no sería necesario este paso.
Ahora añade los eventos que hacen que se produzca la magia:
<script type="text/javascript">
//<![CDATA[
// JS BEFORE & AFTER SLIDE Nº1
jQuery.noConflict(),jQuery(document).ready(function(){var a=jQuery(".img_before"),b=jQuery(".img_before img").width(),c=Math.round(b/2);a.width(c),jQuery(".before_after_slider").mousemove(function(b){var c=b.offsetX||b.clientX-jQueryimg_after.offset().left;a.width(c)}),jQuery(".before_after_slider").mouseleave(function(b){a.stop().animate({width:c},1e3)})});
//]]>
</script>
... Guardar y ¡listo!
slide 'antes y después' Nº2
Respecto al recurso Nº2 el proceso es similar al caso anterior, con la diferencia de que los estilos (CSS) al ser más extensos y al hacer referencia a pseudo-clases (si desconoces el término no te preocupes, no es relevante para el caso) es preferible y necesario añadirlos en el head. Otra diferencia a destacar es que en esta ocasión el script referente a los eventos irá incrustado directamente en el módulo widget/html.
Personalmente me decantaría por esta opción como solución para la comparativa entre imágenes "antes y después", pues, sin ser tan estética, es más efectiva en dispositivos móviles que en el caso anterior (Nº1), ya que te permite desplazar la barra separadora con suma facilidad usando el dedo.
Así, la estructura HTML y, como decía, el script necesario, queda de la siguiente manera:
<div id="comparison" style="height: 450px; max-width: 800px; margin: auto;">
<figure style="width: 100%; max-width: 800px; height: 100%; max-height: 450px; background-image: url(https://url-de-tu-imagen-después.jpg);">
<div id="handle">
</div>
<div id="divisor" style="background-image: url(https://url-de-tu-imagen-antes.jpg);">
</div>
</figure>
<input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()" />
</div>
<script type="text/javascript">
//<![CDATA[
var divisor = document.getElementById("divisor"),
handle = document.getElementById("handle"),
slider = document.getElementById("slider");
function moveDivisor() {
handle.style.left = slider.value+"%";
divisor.style.width = slider.value+"%";
}
window.onload = function() {
moveDivisor();
};
//]]>
</script>
Nuevamente debes sustituir las líneas https://url-de-tu-imagen-después.jpg y https://url-de-tu-imagen-antes.jpg por la URL de tus imágenes de después y antes respectivamente. También es necesario especificar el tamaño de las imágenes a comparar. En este caso dichos paramentos los encontrarás en la primera y segunda línea del código, sustituyendo el número de píxeles donde se indique, según el ejemplo, 800 (para el ancho) y 450 (para el alto).
Toca acceder a la edición del <head> del sitio para incluir los estilos (si se tratase de una plantilla personalizada el espacio apropiado para ello se encuentra en la sección plantilla propia > CSS). Si no lo has hecho ya debes incluir la referencia a la biblioteca jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
</script>
Nota: En el supuesto de que hayas enlazado en otra ocasión con la librería jQuery no sería necesario este paso.
Ahora sí, vamos con los estilos:
/* CSS BEFORE & AFTER SLIDE Nº2 */
#comparison{width:100%;overflow:hidden;position:relative}
figure{position:absolute;background-size:cover;font-size:0;margin:0}
#divisor{background-size:cover;position:absolute;width:50%;box-shadow:0 5px 10px -2px rgba(0,0,0,0.3);bottom:0;height:100%}
#divisor::before,#divisor::after{content:'';position:absolute;right:-2px;width:4px;height:calc(50% - 23px);background:#fff;z-index:3}
#divisor::before{top:0}
#divisor::after{bottom:0}
#handle{position:absolute;height:50px;width:50px;top:50%;left:50%;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);z-index:1;border-radius:100%;background-color:#6C7A89}
#handle::before,#handle::after{content:'';width:0;height:0;border:6px inset transparent;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
#handle::before{border-right:6px solid #fff;left:50%;margin-left:-16px}
#handle::after{border-left:6px solid #fff;right:50%;margin-right:-16px}
input[type=range]{-webkit-appearance:none;-moz-appearance:none;position:absolute;top:50%;left:-25px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:transparent;width:calc(100% + 50px);z-index:2;margin:0;padding:0;height:50px;text-indent:0.01px;text-overflow:'';}
input[type=range]:focus,input[type=range]:active{border:none;outline:none}
input[type=range]::-moz-focus-outer{border:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:50px;width:50px;border-radius:50%;background:transparent;border:4px solid #fff;box-shadow:0 0 8px 1px rgba(0,0,0,0.3)}
input[type=range]::-moz-range-track{-moz-appearance:none;height:15px;width:100%;background-color:transparent;position:relative;outline:none;text-indent:0.01px;text-overflow:'';}
input[type=range]::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb{box-shadow:none;border:none;height:0;width:0;border-radius:0;background:transparent;cursor:pointer;text-indent:0.01px;text-overflow:'';}
input[type=range]::-ms-thumb{box-shadow:none;border:none;height:0;width:0;border-radius:0;background:transparent;cursor:pointer}
Nota: En el head, este código debe incluirse entre las etiquetas <style type="text/css"> y </style> a crear a tal efecto.
Esto es todo. Como verás no es excesivamente complicado añadir una solución tipo imágenes "antes y después" a tu portfolio en Jimdo. Confío en que estos recursos te sean de utilidad. Para cualquier cuestión no dudes en comentar.
Copyright de las imágenes: Евгений Купцов
Fuente slide Nº1: http://codepen.io/ace/pen/BqEer
Fuente slide Nº2: http://codepen.io/clarewhatever/pen/YqXNeB
Fuente: https://vk.com/do_iposle
Diseñador y desarrollador de proyectos web
Jimdo Expert
xiboficemu.jimdofree.com Blog Feed
Vídeos responsive en Jimdo: Módulo dedicado vs Iframe (lun, 31 jul 2017)>> Leer más
Algunas ideas para tus efectos hover en imágenes (I) (Tue, 30 May 2017)
>> Leer más
Primeras impresiones sobre el nuevo blog de Jimdo (Tue, 02 May 2017)
>> Leer más
un blog
sobre Jimdo®
Escribir comentario
Marthi (Tuesday, 28 March 2017 12:27)
Lo intente con ambos el 1 y el 2 , puse el modulo HTML pero a la hora de de editar el <head> me entro el pánico y ya...Como no se lo que hago, prefiero no tocar que la lió parda
David (Tuesday, 28 March 2017 13:10)
@Marthi: Qué no te de miedo que el proceso es reversible (siempre puedes borrar las líneas añadidas y dejarlo como estaba)... Te aconsejo una cosa: Copia todo el código actual que tengas en el <head> en un editor de texto y guárdalo a modo de copia de seguridad por si tuvieses que recuperarlo posteriormente... También puedes crear una subpágina de prueba/temporal en tu web y editar el <head> solo de esa subpágina concreta para comprobar cómo queda resuelto el widget; más info: https://ayuda.jimdo.com/ajustes/p%C3%A1gina-web/editar-head/ ... Con estas medidas de seguridad extra no tienes de qué preocuparte. Saludos!
bullet force (Friday, 19 May 2017)
Crear nuevas imágenes prácticamente desde cero mediante la modificación de fotografías con Photoshop se ha convertido en un verdadero arte.
Martin (Wednesday, 08 July 2020 08:03)
Hola.
Quería poner mas de un efecto en algunas páginas.
Introduzco cada código en su sitio y consigo que me funcione "solo" el primero de cada página.
He hecho mil pruebas y no consigo saber donde puede estar el error.
¿Alguna idea de que puede estar ocurriendo?