La plataforma de blogging Medium utiliza un efecto de zoom personalizado para las imágenes de sus blogs. Cuando el usuario hace clic en la imagen, esta automáticamente se redimensiona a un tamaño mucho mayor y se centra con respecto a la página. Es un gran efecto único de Medium, y desde ya te digo que no es tarea fácil copiarlo en tu web.
Ahora con el script MediumLightBox, es mucho más sencillo que nunca. Este script JS es muy ligero y es fácil añadirlo a cualquier sitio web o blog.
Si quieres ver cómo funciona, puedes verlo visitando la página de demo alojada por su propio creador Davide Calignano.
Invirtió mucho tiempo en realizar una transición perfecta y en desarrollar el efecto animado que abriese la imagen a un tamaño mucho mayor en Medium. Toda la librería está escrita en Javascript puro, por lo que no se basa en scripts de terceros como jQuery.
Para configurarla tendrás que tener conocimientos de Javascript, pero no hace falta que seas un expertos. Con unas cuantas dotes del lenguaje, la utilizarás sin problema alguno.
Cada imagen puede coger atributos para establecer la altura y el ancho a tamaño completo, los cuales se extraen dinámicamente del plugin lightbox. El código de configuración es muy simple y puede dirigirse a imágenes en concreto, o contenedores como el elemento <figure>.
Este es el único snippet de código único que necesitarás para ejecutar el plugin:
MediumLightbox('figure.zoom-effect');
Dentro de la función, tienes que pasar un selector para todos los elementos (por ejemplo, <figure>) con la clase de efecto .zoom. Esta clase se define específicamente en la hoja de estilo MediumLightbox, por lo que es una opción muy buena si quieres utilizarla también en tu página.
Y, una vez esté configurado, ¡ya estará todo listo!
En el área de contenido de tu página, puedes insertar todas las imágenes bajo el tag <figure> utilizando esta clase. Esdas imágenes recibirán automáticamente el efecto zoom de Medium, tanto para los usuarios de escritorio, como para los que naveguen mediante dispositivos móviles.
Fuente: hongkiat.com