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:

        

          
          

		  
iziModal.js - Una finestra modale veramente dinamica jQuery Plugin
            
La maggior parte delle finestre modali sembra distrarre e infastidire il visitatore con i campi opt-in e le offerte indesiderate . Questi modals occupano spesso l'intera pagina, sembrano terribili e non offrono un modo chiaro per chiudere la finestra. Per fortuna, iziModal.js è l'esatto opposto.
			
(Consigli tecnici e di design)
          
        
      

        

          
          

		  
Spiegazione del calcolo quantistico (come te di 5 anni)
            
Il concetto di "Quantum Computing" di recente diventato virale - grazie ad un certo Primo Ministro - è uno dei tanti territori inesplorati della scienza da noi non scientifici .Il motivo per cui molti di noi non ne hanno ancora sentito parlare nonostante siano in giro da decenni, è che per la maggior parte è teorico e quelli che ci stavano sperimentando all'inizio erano molto silenziosi a causa del bisogno per il segreto militare e aziendale.Ci
			
(Consigli tecnici e di design)
          
        
      

  
  
  



Articoli Interessanti






			
	
				

					Top Invoice & Accounting Services per designer freelance
					

			
	
				

					Schermi - Semplifica la tua esperienza su schermo condiviso su Android Nougat
					
						







			
	
				

					7 eBook gratuiti per imparare AngularJS
					

			
	
				

					Creare Lightbox reattivo e bello a pagina intera con BaguetteBox.js