Feia molt temps que estava buscant un plugin per comparar fotografies a WordPress, ja sigui per mostrar l’abans/després d’una fotografia, comparar una imatge en blanc i negre Vs una altra en color, o simplement comparar dues fotografies diferents. Per fi l’he trobat! Es diu Smart Before After Viewer.

Fins a data d’avui n’havia trobat alguns, però tots ells molt complicats, amb un recambolesc funcionament mitjançant codi i, a més, deixaven de funcionar a la mínima actualització de WordPress. Però Smart Before After Viewer, és diferent, amb un funcionament fàcil i amb diverses opcions a ajustar.

[before-after width=”800px” viewer_position=”center” move_on_hover=”false” label_one=”Blanc i negre” label_two=”Color”][/before-after]

Una de les característiques molt interessant d’aquest plugin per comparar fotografies és la seva capacitat responsive, podem utilitzar-lo perfectament tant en visualitzar la nostra pàgina web des d’un ordinador com des d’una tableta o smartphone amb pantalla tàctil.

Com comentava, el seu funcionament és molt fàcil, al instal·lar-ho ens apareixerà una icona al nostre editor d’entrades/pàgines que clicant en ell podrem accedir a les opcions:

A continuació us deixo amb alguns exemples i variacions que podem aplicar al comparador de fotografies:

[before-after width=”400px” orientation=”vertical” viewer_position=”center” offset=”0.25″ overlay=”false” label_one=”Blanco y negro” label_two=”Color”][/before-after] Mostrant 1/4 part de la imatge 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] Mostrant 3/4 parts de la imatge 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 vermell mostrant a parts iguals cada imatge

De la mateixa manera que a la imatge que obre l’article, el plugin per comparar fotografies a WordPress ens permet definir unes etiquetes que seran visibles quan passem el mouse per damunt, podent-les col·locar en la part inferior o superior, definir el seu color, i fins i tot triar el color de fons i la seva opacitat:

[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]

I finalment us deixo amb un exemple comparant dues fotografies amb el separador que es desplaça sense necessitat de fer “clic” en ell, simplement amb el propi moviment del mouse en passar per damunt:

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

Podeu adquirir el plugin Smart Before After Viewer en aquest enllaç, el seu preu és de 15$.

[message type=”custom”]Els enllaços a la pàgina del plugin són enllaços referenciats, a tu et costarà la mateix i a canvi jo rebré una petita recompensa. Gràcies![/message]