Bruk Glatt Zoom Effekt til bilder med Zoomer

Det er et sitat som går, "et bilde er verdt tusen ord." I webdesign blir det enda mer relevant. Spesielt når det handler om utstillingsprodukter, som for eksempel på et e-handelsområde. Folk trenger å få en klar forståelse og kunne se på produktet på en visuell måte før de kjøper et kjøp.

Å gjøre bildet så stort som mulig kan ikke løse dette problemet, da det også vil ta en stor ledig plass. Derfor er det beste valget å gjøre bildet zoombart. Med Zoomer kan du få det til å skje med letthet.

Zoomer er et gratis javascriptbibliotek som gjør at bildet ditt kan zoomes . Når den er aktivert, vil den legge til sin egen stil og en knapp for å zoome inn og ut. Den støtter også flere bilder, som automatisk blir omgjort til et bildegalleri.

initialisering

Før du initialiserer den, inkluderer du først Zoomer-skriptet (som du kan få fra GitHub-siden) i prosjektet ditt slik:

Zoomer vil omgjøre bildet med sin stil og legge til en zooming inn og ut-knapp. Du bør inkludere Zoomer stilarket før den avsluttende taggen av head også.

 ..  .. 

Zoomer inn og ut

Hvis du vil opprette en ny Zoomer, kan du enkelt ta med et bilde i en wrapper. Ikke glem å gi innpakningen fast høyde og bredde da alt ledig plass vil bli fylt av den nye merkingen. For eksempel lager jeg en wrapper med navnet .zoomable og definerer høyden til 500px og bredden til 100% slik:

 .zoomable {høyde: 500px; bredde: 100%; } 

Da pakker jeg bildet jeg vil gjøre zoombar, som nedenfor:

        

          
          

		  
15 leksjoner "Krigskunst" lærer deg om å vinne livskampene
            
Krigskunst av Sun Tzu er allment ansett av mange som ikke bare en "bibel" for slagmarken, men også en stor kilde til leksjoner for livet generelt. Livet i seg selv er en konstant kamp for, hvis du ikke holder deg på toppen, gjør det i det minste gjennom daglige utfordringer, samtidig som du får mest mulig ut av ressursene .Med
			
(Tekniske og design tips)
          
        
      

        

          
          

		  
7 Prototyping Tools for Web Designers
            
Kjenner du forskjellen mellom wireframe, mockup og prototype ? Disse tre begrepene brukes ofte utveksling til å bety det samme. Problemet er, det burde du ikke.En wireframe er en statisk, lavfidelisk skildring av et design . Den gir en oversikt over utseendet eller formen til en foreslått design, men ikke dens funksjonalitet eller følelse. E
			
(Tekniske og design tips)
          
        
      

  
  
  



Interessante Artikler






			
	
				

					Den aller beste håndmaleri kunst [PICS]
					

			
	
				

					Parallax Scrolling gjorde det enkelt med StickyStack.js
					
						







			
	
				

					5 ting du bør vite om mobilannonsering
					

			
	
				

					5 Massive reklamekampanjer kriger mellom konkurrerende merker