Glad zoomeffect toepassen op afbeeldingen met Zoomer

Er is een citaat dat zegt: "een foto zegt meer dan duizend woorden." In webdesign wordt het nog relevanter. Vooral als het gaat om het presenteren van producten, bijvoorbeeld op een e-commercesite. Mensen moeten een goed begrip krijgen en op een visuele manier naar het product kunnen kijken voordat ze toch een aankoop doen.

De afbeelding zo groot mogelijk maken, kan dit probleem niet oplossen, omdat er ook veel ruimte beschikbaar is. Daarom is de beste keuze om de afbeelding zoombaar te maken. Met Zoomer kunt u dat gemakkelijk laten gebeuren.

Zoomer is een gratis javascript-bibliotheek waarmee u uw afbeelding kunt zoomen . Wanneer deze is ingeschakeld, voegt deze een eigen stijl toe en een knop om in en uit te zoomen. Het ondersteunt ook meerdere afbeeldingen, die automatisch worden omgezet in een afbeeldingengalerij.

initialisatie

Voordat u het initialiseert, moet u eerst het Zoomer-script (dat u van de GitHub-pagina kunt krijgen) als volgt in uw project opnemen:

Zoomer zal de afbeelding omringen met zijn stijl en een zoom in en uit knop toevoegen. U moet ook het Zoomer-stylesheet opnemen voor de afsluitende tag van het head .

 ..  .. 

In- en uitzoomen

Om een ​​nieuwe Zoomer te maken, voeg je eenvoudig een afbeelding in een wrapper toe. Vergeet niet om de wikkel vaste hoogte en breedte te geven, omdat alle beschikbare ruimte door de nieuwe opmaak wordt gevuld. Ik maak bijvoorbeeld een omslag met de naam .zoomable en definieer de hoogte tot 500px en de breedte tot 100% als volgt:

 .zoomable {hoogte: 500px; breedte: 100%; } 

Vervolgens wikkel ik de afbeelding die ik wil vergroten, zoals hieronder:

        

          
          

		  
CSS sorteren en ordenen met CSSComb
            
In vergelijking met andere webgerelateerde talen is CSS relatief eenvoudig en gemakkelijk te schrijven . Maar tegelijkertijd is het ook moeilijk te organiseren, vooral als het gaat om codes die uit duizenden regels bestaan.Het zou geweldig zijn als we CSS kunnen organiseren en het voor andere ontwikkelaars gemakkelijker kunnen maken om de codes te lezen en te onderhouden - wat handig is als je in een team werkt
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
30 coole computertoetsenborden die u kunt kopen 2018
            
Als een van de meest essentiële elementen van een computer, zijn toetsenborden in alle soorten en maten verkrijgbaar. Tegenwoordig gebruik je geen toetsenborden om alleen te typen, je speelt videogames en zelfs een toetsenbord om op je pc te navigeren voor het geval je muis niet werkt.Maar als je een fan bent van coole dingen en geen gebruik wilt maken van een alledaags ontworpen conventioneel toetsenbord, bekijk dan deze lijst met absoluut coole toetsenborden .
			
(Technische en ontwerptips)
          
        
      

  
  
  



Interessante Artikelen






			
	
				

					Nieuwjaarsviering: 15 adembenemende vuurwerkfoto's
					

			
	
				

					10 Hulpmiddelen om de computer te beschermen tegen geïnfecteerde USB-flashstations
					
						







			
	
				

					20 heerlijk ontworpen menu's voor eten en drinken
					

			
	
				

					Genereer, bekijk en download app-pictogrammen met deze tool