Applica l'effetto di zoom uniforme alle immagini con Zoomer

C'è una citazione che dice "un'immagine vale più di mille parole". Nel web design, diventa ancora più rilevante. Soprattutto quando si tratta di mostrare prodotti, ad esempio in un sito di e-commerce. Le persone hanno bisogno di avere una comprensione chiara ed essere in grado di guardare il prodotto in modo visivo prima di effettuare un acquisto, dopo tutto.

Rendere l'immagine più grande possibile non può risolvere questo problema, poiché richiederà anche un'enorme quantità di spazio disponibile. Pertanto la scelta migliore è rendere l'immagine zoomabile. Con Zoomer puoi farlo facilmente.

Zoomer è una libreria javascript gratuita che consente di ingrandire l'immagine . Quando è abilitato, aggiungerà il proprio stile e un pulsante per lo zoom avanti e indietro. Supporta anche più immagini, che verranno automaticamente trasformate in una galleria di immagini.

Inizializzazione

Prima di inizializzarlo, prima includi lo script Zoomer (che puoi ottenere dalla pagina GitHub) nel tuo progetto in questo modo:

Zoomer circonda l'immagine con il suo stile e aggiunge un pulsante di ingrandimento e riduzione. Dovresti includere il foglio di stile Zoomer prima del tag di chiusura della head .

 ..  .. 

Zoom avanti e indietro

Per creare un nuovo Zoomer, includere facilmente un'immagine all'interno di un wrapper. Non dimenticare di dare al wrapper un'altezza e una larghezza fisse in quanto tutto lo spazio disponibile sarà riempito dal nuovo markup. Ad esempio, creo un wrapper con il nome di .zoomable e definisco l'altezza a 500px e la larghezza a 100% in questo modo:

 .zoomable {height: 500px; larghezza: 100%; } 

Quindi avvolgo l'immagine che voglio rendere zoomabile, come di seguito:

        

          
          

		  
20 plugin WordPress per ottimizzare categoria e tag
            
Con la "Categoria" e "Tag" in WordPress, è possibile organizzare i contenuti in relazione l'uno con l'altro. Queste sono caratteristiche semplici che gli utenti possono comprendere immediatamente. Ma se usi WordPress da un po 'di tempo, sai che c'è sempre margine di miglioramento.S
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
50+ caratteri di alta qualità e simboli gratuiti per i web designer
            
I caratteri simbolici dall'aspetto impressionante sono apparsi in tutto il web negli ultimi tempi, con il numero di caratteri progettati per essere utilizzati come icone, simboli e glifi che aumentano di giorno in giorno. In effetti, molti siti Web hanno già sostituito le loro immagini con un singolo carattere simbolico - GitHub ne è un esempio.U
			
(Consigli tecnici e di design)
          
        
      

  
  
  



Articoli Interessanti






			
	
				

					Come inviare e archiviare email Gmail con un clic
					

			
	
				

					50 suggerimenti e trucchi di Facebook più richiesti per il 2018
					
						







			
	
				

					Prova queste app di fatturazione e gestione del tempo efficienti
					

			
	
				

					Beating Designer's Block: 5 suggerimenti per riprendere la tua creatività