Cómo ampliar imágenes como medio
La plataforma de blogs Medium utiliza un efecto de zoom de imagen personalizada en sus páginas de blog. Cada vez que el usuario haga clic en una imagen, se ampliará automáticamente a un tamaño más grande..
Es un gran efecto y ciertamente único para Medium, pero nunca fue algo que pudiera copiarse fácilmente.
Ahora, con el Caja de luz mediana Guión, es más fácil que nunca. Este script JS es ligero y fácil de agregar a cualquier sitio web o blog.
Si desea ver cómo funciona esto, puede visitar el página de demostración en vivo Alojado por el creador Davide Calignano..
Pasó un rato clavando la transición exacta y el efecto de animación personalizado para crear una imagen de espejo de la imagen de Medium zoom. Toda la biblioteca es escrito en JavaScript puro, por lo que no se basa en ningún 3rd guiones del partido como jQuery.
Necesitará conocer un poco de JS para configurarlo, pero ciertamente no necesita ser un experto..
Cada imagen puede tomar atributos de datos para ajustar la altura y el ancho de tamaño completo, todos los cuales son tirado dinámicamente desde el plugin lightbox. El código de configuración es muy simple y puede apuntar a las propias imágenes, o contenedores como el
Aquí está el fragmento de código único que necesita para ejecutar el complemento:
MediumLightbox ('figure.zoom-effect'); Dentro de la función, podrás pasar un selector para todos los elementos (por ejemplo,. .efecto de zoom clase. Esta clase es específicamente definido en la hoja de estilos de MediumLightbox, por lo que es lo mejor para usar esto también en su página.
Y, una vez que está configurado, ya está todo listo!
En el área de contenido de la página, puede envolver todas las imágenes en un
Para descargar una copia de este script y comenzar, simplemente visite el repositorio principal de GitHub. Aquí también encontrarás documentación junto con fragmentos de código Puedes copiar para configurar rápidamente.
