Hacía mucho tiempo que andaba buscando un plugin para comparar fotografías en WordPress, ya sea para mostrar el antes/después de una fotografía, comparar una imagen en blanco y negro Vs otra en color, o simplemente comparar dos fotografías distintas. ¡Al fin lo he encontrado! Se llama Smart Before After Viewer.

Hasta la fecha había encontrado algunos, pero todos ellos muy complicados, con un liado funcionamiento mediante código y, además, dejaban de funcionar a la mínima actualización de WordPress. Pero Smart Before After Viewer, es distinto, con un funcionamiento fácil y con varias opciones a ajustar.

[before-after width=»800px» viewer_position=»center» move_on_hover=»false» label_one=»Blanco y negro» label_two=»Color»][/before-after]

Una de las características muy interesante de este plugin para comparar fotografías es su capacidad responsive, podemos usarlo perfectamente tanto al visualizar nuestra página web desde un ordenador como desde una tableta o smartphone con pantalla táctil.

Como comentaba, su funcionamiento es muy fácil, al instalarlo nos aparecerá un icono en nuestro editor de entradas/páginas que clicando en él podremos acceder a las opciones:

A continuación os dejo con algunos ejemplos y variaciones que podemos aplicar al comparador de fotografías:

[before-after width=»400px» orientation=»vertical» viewer_position=»center» offset=»0.25″ overlay=»false» label_one=»Blanco y negro» label_two=»Color»][/before-after] Mostrando 1/4 parte de la imagen superior

[before-after width=»400px» viewer_position=»center» orientation=»vertical» offset=»0.75″ overlay=»false» label_one=»Blanco y negro» label_two=»Color»][/before-after] Mostrando 3/4 partes de la imagen superior

[before-after width=»400px» viewer_position=»center» orientation=»vertical» offset=»0.5″ color=»#ff0000″ overlay=»false» label_one=»Blanco y negro» label_two=»Color»][/before-after] Separador de color rojo mostrando a partes iguales cada imagen

Al igual que la imagen que abre el artículo, el plugin para comparar fotografías en WordPress nos permite definir unas etiquetas que serán visibles cuando pasemos el mouse por encima, pudiéndolas colocar en la parte inferior o superior, definir su color, e incluso elegir el color de fondo y su opacidad:

[before-after width=»400px» viewer_position=»center» orientation=»horizontal» offset=»0.5″ label_one=»1960″ label_two=»2011″][/before-after]

[before-after width=»400px» viewer_position=»center» overlay_color=»#caf59f» overlay_opacity=»0.25″ label_one=»1961″ label_two=»2011″ label_position=»two» label_color=»#FFFF00″][/before-after]

Y por último os dejo con un ejemplo comparando dos fotografías con el separador que se desplaza sin necesidad de hacer «click» en él, simplemente con el propio movimiento del mouse al pasar por encima:

[before-after width=»1024px» viewer_position=»center» move_on_hover=»true» overlay=»false»][/before-after]

Podéis adquirir el plugin Smart Before After Viewer en este enlace, su precio es de 15$.

[message type=»custom»]Los enlaces a la página del plugin son enlaces referenciados, a ti te costará la mismo y a cambio yo recibiré una pequeña recompensa. ¡Gracias![/message]