Aplicar un efecto de zoom suave a las imágenes con Zoomer

Hay una cita que dice: "una imagen vale más que mil palabras". En el diseño web, se vuelve aún más relevante. Especialmente cuando se trata de exhibir productos, como en un sitio de comercio electrónico, por ejemplo. La gente necesita tener una comprensión clara y poder mirar el producto de una manera visual antes de hacer una compra después de todo.

Hacer la imagen lo más grande posible no puede resolver este problema, ya que también tomará una gran cantidad de espacio disponible. Por lo tanto, la mejor opción es hacer que la imagen sea ampliable. Con Zoomer puedes hacer que eso ocurra con facilidad.

Zoomer es una biblioteca de JavaScript gratuita que permite que su imagen sea ampliable . Cuando está habilitado, agregará su propio estilo y un botón para acercar y alejar. También es compatible con múltiples imágenes, que se convertirán automáticamente en una galería de imágenes.

Inicialización

Antes de inicializarlo, primero incluya el script Zoomer (que puede obtener de la página GitHub) en su proyecto de la siguiente manera:

Zoomer rodeará la imagen con su estilo y agregará un botón de acercamiento y alejamiento. También debe incluir la hoja de estilo de Zoomer antes de la etiqueta de cierre de la head .

 ..  .. 

Acercar y alejar

Para crear un nuevo Zoomer, incluya fácilmente una imagen dentro de un contenedor. No se olvide de dar al contenedor altura y ancho fijos, ya que todo el espacio disponible se rellenará con el nuevo marcado. Por ejemplo, creo un contenedor con el nombre de .zoomable y defino la altura a 500px y el ancho al 100% como .zoomable :

 .zoomable {altura: 500px; ancho: 100%; } 

Luego envuelvo la imagen que quiero hacer zoomable, como se muestra a continuación:

        

          
          

		  
Ahora puede subir fotos a Instagram a través de su página web móvil
            
Publicar una foto en su cuenta de Instagram usando su dispositivo móvil ya no requerirá que la aplicación Instagram se instale en dicho dispositivo. ¿Cómo puede preguntar? Bueno, Instagram ahora te permite subir tus fotos al servicio directamente desde la página web móvil .La forma en que funciona esta característica es bastante sencilla . Todo l
			
(Consejos de tecnología y diseño)
          
        
      

        

          
          

		  
12 complementos para acelerar tu sitio web de WordPress
            
Todo el mundo ama un sitio web de carga rápida (que también incluye a usted y a sus lectores), por lo que, por supuesto, ya sabe que las velocidades de carga del sitio web afectan la experiencia del usuario.En esta publicación, no vamos a convencerte aún más de por qué necesitas un sitio de WordPress más rápido, ni a compartir contigo cómo editar PHP, javascript y bases de datos, todos esos conocimientos técnicos para optimizar aún más tu sitio.¿Por qué en
			
(Consejos de tecnología y diseño)
          
        
      

  
  
  



Artículos De Interés






			
	
				

					NOPE - Extensión de Chrome para evitar conversaciones molestas
					

			
	
				

					La batalla de compilar guiones: Gulp Vs Grunt
					
						







			
	
				

					Por qué la externalización de software funciona de forma diferente a como lo piensas [Op-Ed]
					

			
	
				

					30 túneles de árboles que te quitarán la respiración