Comparativa de imágenes en Html5
Hoy os traemos un pequeño tutorial que puede salvaros el culo. Está claro que por un módico precio las tan famosas y apreciadas páginas que hacen que «to dios» sea diseñador. si, si, esas de arrastrar y soltar que empiezan por can y terminan por vas, te ofrecen un bloque de comparativa de imágenes. Pero mi necesidad es específica, yo quería una comparativa de imágenes en Html5.
Tras mucho tiempo trabajando en la web para dejarla a mi gusto, me encontré, con que algunos clientes me dejaban exponer el trabajo que les realizaba. Algunos eran re-styling y me apetecía enseñar el antes y el después. La forma simple y sencilla es colocar dos imagenes juntas y listo, pero yo quería un poco de experiencia de usuario.
Asi que intente colocar un slider de comparativa hecho con html, css y javascript. Mi sorpresa vino cuando al colocarlo en la web, los css y javascript creaban conflicto con los que ya tenía en mi página.
Todos los «div» descuadrados, los textos cambiados de color y tamaño, las imágenes recortadas y un largo etcétera. Asi pues, como habia hecho en mis inicios, no tuve más remedio que destripar los archivos de la comparativa y buscar la forma de acomodarlos.
Preparando archivos
En la página de descargas 👈 os he dejado un archivo rar para que os lo descargueis. Ahi teneis todo lo necesario para implementar la comparativa de imágenes en html5. Una vez descargado y descomprimido deberéis utilizar el editor de código que tengáis. En mi caso utilizo Dreamweaver pero vosotros utilizad el que tengáis.
Visualmente debemos tener claro donde vamos a ubicar la comparativa de imágenes en html5 y luego acceder al código de dicha ubicación. En mi caso tengo una lista para conformar las ubicaciones de mis imagenes y las distribuyo por medio de css.
Deberemos tener el archivo css en la carpeta de los css para estar localizable y lo mismo con el archivo javascript. Cuando abráis el html de la comparativa solo deberéis utilizar lo que está sombreado en la imagen.
Enlazar los archivos externos de la Comparativa de imágenes en Html5
Si como yo sois impacientes y le habéis dado a visualizar, estaréis arrancándose los pelos, tranquilos…. aún tenemos que enlazar los css y javascript para que se vea bien.
En primer lugar colocaremos el enlace del css en el head con el típico «link href« para que el html lea el estilo css asociado. En ese mismo head deberemos poner el enlace al javascript tambien «script src«.
Luego bajaremos hasta la etiqueta de cierre del body y justo encima de ella pondremos…..
<script type=’text/javascript’> var MyComparation = new slimBeforeAfter();</script>
Este pequeño trozo de código es el que hace funcionar todo, recordad que debe ir justo encima del cierre de body si no, no funcionará.
Os dejo una imagen de donde va el script final que os he puesto arriba. Por favor copiadlo bien con todos los signos y tal cual está o no funcionará.
Últimos retoques
En este paso ya debería funcionar peroooo….. queda un último paso muy importante, las imágenes. En la imagen de abajo os he puesto como lo he incrustado yo en mi web. Simplemente deberéis cambiar el enlace a las imágenes y listo. Esta comparativa no lleva las palabras antes/before y después/after incluidas. Yo suelo ponerlas en las mismas imágenes cuando las edito.
Las flechas azules indican la sección de vuestro div , ul, ol o li donde vayáis a colocar la comparativa de imágenes en html5. Las flechas rojas indican los enlaces a las imágenes que deberéis cambiar por las vuestras claro está.
Si tenéis alguna duda o no os funciona del todo bien, podéis dejarlas en los comentarios y os responderé lo antes posible. Una imagen final de como me ha quedado a mi.
Si queréis ver como funciona en vivo podéis verlo en mi pagina aqui 👈. Espero que os sirva y podáis implementarlo en vuestra página web. Nos vemos en los bares!!!!
